webpack4进阶概念

Posted 2022-09-08 fanbulaile

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‘