11-webpack4.x 提取公共代码

当一部分代码需要反复被用到，反复请求浪费资源，将公共代码 抽离，需要时读取缓存即可

先上图：

1-抽离脚本的公共代码：

代码抽离.jpg

在上例中 链各个入口文件，都在顶部 import了 a.js 和 b.js，为了节省资源，将共同的代码抽离缓存，提升性能。

/index.js
import './a';
import './b';
console.log('index.js')

-------------------------------  这是两个入口文件
/other.js
import './a';
import './b';
console.log('other.js')

在module.export={}里面配置，optimization{},代码如下。

module.exports={
    mode:'production',
    optimization: {
        splitChunks: {  //分割代码块

            cacheGroups: {  //缓存组 缓存公共代码

                commons: {  //公共模块 
                    name: "commons",
                    chunks: "initial",  //入口处开始提取代码
                    minSize:0,      //代码最小多大，进行抽离
                    minChunks:2,    //代码复 2 次以上的抽离
                }
            }
        }
    },

重新打包后在dist文件夹得到commons.js文件，在新的打包文件中，已经完成了公共代码抽离

代码抽离2.jpg

2-使用vendor 抽离公共引入模块：

在cacheGroups添加vendor对象，配置提取公共 引入模块，输出vendor.js 到dist目录下

optimization: {
        splitChunks: {  //分割代码块

            cacheGroups: {  //缓存组 缓存公共代码

                commons: {  //公共模块 
                    name: "commons",
                    chunks: "initial",  //入口处开始提取代码
                    minSize:0,      //代码最小多大，进行抽离
                    minChunks:2,    //代码复 2 次以上的抽离
                },
                // vendor:{    //比较优雅的分离打包配置：将重复引入的第三方包抽离出来
                //     priority:1,     //优先级
                //     test:/node_modules/,    //引用的代码包位置
                //     chunks:'initial',   //代码入口
                //     minSize:0,      //代码最小大小 
                //     minChunks:2  //最少引用次数
                // }
                vendors: { 
                    test: /node_modules/,
                     name: 'vendors', 
                     minSize: 0,
                      minChunks: 1, 
                      chunks: 'initial',
                       priority: 1 // 该配置项是设置处理的优先级，数值越大越优先处理 
               }
            }
         },