[转] webpack学习(七) -- 提取公共js代码

提取公共js代码

前言

项目中我们常遇到项目中有多个入口文件的情况，这时候如果有两个入口文件引用了相同的模块，这时候如果我们没有做任何处理的话，在打包时就会把这个相同的模块打包两次，这样既影响了性能，又降低了我们的代码质量，本文就介绍一种解决该现象的插件，来提取公共的js代码。

条件

该方法只适用于多入口js文件

优点

• 减少代码冗余
• 提高用户加载速度

webpack4新特性(splitChunks)

splitChunks替代了之前webpack3的common-chunk-plugin插件

不使用插件时的案例

我们同样采用案例说话，小女认为案例比枯燥的文字易懂，看起来也不是狠枯燥嘛~

• 创建案例文件

src下创建两个入口文件，一个公共js文件，和两个依赖公共文件的js文件。他们之间的关系：红色框里面是两个入口文件；蓝色框是引入的公共文件；橘色框是两个都依赖公共文件的js文件

 

 

• 在两个入口文件中分别引入subPageA和subPageB

 

 

• 在公共js文件module.js中随便写点模块代码

 

 

• 在subPageA和subPageB中都引入module.js模块

 

 

• 在两个入口文件中分别引入subPageA和subPageB文件

 

 

• 修改webpack配置文件

  • 多入口配置

 

 

- 用webpack进行打包，得到两个js打包文件
复制代码

 

 

- 可以看到两个打包出的文件中都有module模块出现
复制代码

 

 

 

 

这就说明在没有处理的情况下，多入口文件引入相同的模块，打包后会多次打包相同的模块

特性使用

• 在导出文件中增加一个公共模块的js文件

 

 

• 配置分离包

 

 

optimization: {
    splitChunks: {
        cacheGroups: {
            common: { 
                name: 'common', //分离出的公共模块的名字，如果没写就默认是上一层的名字
                chunks: 'all', //在哪些js范围内寻找公共模块，可以是src下的文件里，也可以是node_modules中的js文件
                minSize: 30, //抽离出的包的最小体积，默认30kb
                minChunks:2,
                //当前公共模块出现的最少次数，
            }
        }
    }
}
复制代码

下面让我们来看看配置后的效果吧

• 执行webpack打包
• 可以看到打包后的文件中增加了common文件，其他两个出口文件中也没有了公共模块相关的代码

 

 

 

 

分离业务逻辑公共js和第三方库公共js

项目中尝尝需要用到第三方库,这时候如果把第三方库和我们的业务逻辑公共模块混合在一起，是狠不好的行为，我们需要把二者分离开

方法很简单，在刚才的webpack配置的下面再配置一个

optimization: {
    splitChunks: {
        cacheGroups: {
            common: { 
                name: 'common', 
                chunks: 'all', 
                minSize: 30, 
                minChunks:2,
                priority:1, //优先级
            },
            vendor:{
                name: 'vendor',
                test:/[\\/]node_modules[\\/]/, //在node_modules范围内进行匹配
                priority:10, //优先级，先抽离公共的第三方库，再抽离业务代码，值越大优先级越高
                chunks:'all'
            }
        }
    }
}
复制代码

• 执行webpack
• 打包文件中多出了vender文件

 

 

总结

下面是我们常见的配置属性

 

 

下面包括了几乎所有的参数