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文件

总结

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

下面包括了几乎全部的参数