webpack4进阶概念

Tree Shaking 树木摇晃：不用的js功能不打包

            当有多个函数功能时，只调用了其中某一些函数，可是打包时，会通通所有打包，形成浪费，这个时候就要使用“摇树”，将没有用到的功能摇出去，再打包；

            业务代码中凡是用import引入都模块，都会检查是否调用了模块里面的方法

            开发模式下，没有调用的函数，也仍是会打包进去，由于会调试，

            可是生产环境，就会完全生效，不过生产环境无需配置，可是package.json中仍是要设置

             

               package.json中规定哪些文件不用检查

                 这里是全部css文件不检查，若是没有则是false

 

Develoment和Production模式的区分打包：开发模式和生产模式

            未区分前：共同使用一个配置，容易形成配置的臃肿，多余；

                      

                区分配置：有些配置只适合某一个模式，就不是形成配置多余；

              将webpack.config.js配置，分为两种模式的打包方式

              分别配置webpack.dev.js开发配置和webpack.prod.js生产配置

               

              在package.json中的启动方式要经过--config来改变

                

                可是，若是仅上面这样建立两个配置，里面又有大量相同的内容，又形成浪费：

                接着建立一个webpack.common.js的公共配置，用来放webpack.dev.js开发配置和webpack.prod.js生产配置的公共部分

                 提取公共部分结束后，安装npm install webpack-merge --save-dev,合并配置；用来公共配置与webpack.dev.js和webpack.prod.js的结合

                  以合并生成环境配置为例：

                   

                     合并结束能够用完美来形容。。。。可是看着不舒服啊，根目录下多了3个配置   

                      

                     新建一个build文件夹，将3个配置放进去，而后在package.json中启动要添加路径

                             

                      

                       vue-cli就是这样处理开发模式和生产模式。。。。。。这下看着舒服了

 

webpack和code Splitting:

        JS代码分割，与webpack无关,经过对代码的拆分提升性能；

                   将业务代码和引用的库、模块分割打包，会同时引用两个js文件，比不分割引用一个大的js文件性能高；并且改变业务代码，浏览器不会再重载引用的库，大大提升性能；

                 1.同步代码：import引入库、模块再继续执行业务代码，按顺序

                   all是异步同步都分割

                   

                   2.异步代码：在函数里面引入库、模块，就无需配置，也会分割，由于有默认值

                

                  不过异步代码打包库出来的js名字默认是数字.js  如：0.js,不是很好看，能够在引入的设置

                   这个注释就能够更名字输出

                   

                    可是输出的名字会带一个vendors~,上图输出的就是vendors~loadsh.js,要想移出vendors,须要在webpack中配置

                     

                     代码分割，若是不写会有默认配置

                         等价于   

                     参数的意思以下图

                      

 

                     

        Lazy loading 懒加载：经过对代码的分割

，一些异步加载的模块，在页面刷新时，不须要展现，就不用加载，而后在用户完成须要或将须要新代码块的操做后加载它。这会加速应用程序的初始负载，并减轻其总体重量，由于某些块甚至可能永远不会加载。

 

 

打包内容分析：webpack提供了一个库analyse；github上有

 

                     在package.json中打包快捷键中增长红线的字符，打包出来会多一个stats.json文件，

                    访问http://webpack.github.com/analyse，上传这个json文件便可

                     

                   webpack推荐用异步：异步能够减小首屏时间，提升性能，可是当触发某异步的文件时，又会感受加载变慢，影响体验；

                解决方法：Prefetching modules；空闲时间偷偷加载

就是首屏加载完成后，在闲置的时间能加载异步，当触发时，异步已经加载过了，因此就会很快，而也不会影响首屏的加载

               引入异步模块时，使用魔法注释：/* webpackPrefetch:true */就能够

 

                

 

前言webpack的打包会把css打包到js中去,因此便有了css代码分割

        css代码分割：

MiniCssExtractPlugin，不支持热模块，因此改变css要手动刷新，下降开发效率，因此只适用于生成环境打包用

       npm install --save-dev mini-css-extract-plugin

       

        

         使用MiniCssExtractPlugin.loader替换style-loader

          

         也有配置：能够将全部的css代码分割到一个文件中

           

 

        可是这样分离出来的代码，是没有被压缩的代码。。。。。

         安装压缩合并CSS插件Minimizing For Production：

               npm install optimize-css-assets-webpack-plugin --save-dev      

         

         

 

 

webpack与浏览器缓存Caching:

          开发环境不存在这个，在生产环境中，打包的文件上传服务器，被用户使用后，会被缓存在浏览器时；当须要修改代码时，又从新打包上传，而用户的浏览器发现加载的文件名字同样，就不会从新加载，仍是会从缓存中加载，就形成了修改的代码不能更新使用；

        解决方法：每次打包的文件，都会有本身的hash值，只要文件修改，hash值才会变化，不修改，不管打包几回，值都不会发送改变；

       在webpack.prod.js生成配置中输出时使用contenthash,这样修改的文件名就会改变，而用户的浏览器发现不同的文件，就会从新加载，相同名文件则不会加载，这有提升了性能

         

 

 

 

Shimming:垫片，解决某些问题

        webpack的核心就是模块与模块之间分开，

         可是当有些公共模块或库须要在多个模块中调用，

         或者好比有一些第三方库使用了JQ的$,可是不是用import引用的，当你调用时，不能识别，

         就能够在webpack的配置中引入webpack的插件ProvidePlugin

        

       以JQ为例，当模块使用$时，就会自动在模块顶部添加import $ from 'jquery'