webpack dll打包重复问题优化的解决打包重复问题优化的解决
在使用dll plugin过程中出现的一个包依赖问题,这个问题导致打出来的包会包含重复的代码。这篇文章主要介
绍了webpack dll打包重复问题优化的解决,感兴趣的小伙伴们可以参考一下
关于webpack dll的使用,我这里不做过多介绍,网上都有,一撸一大把,今天我要说的是在使用dll plugin过程中出现的一个
包依赖问题,这个问题导致打出来的包会包含重复的代码。
优化背景优化背景
最近在给公司项目优化的时候,由于 内部内部CDN上传文件大小限制了上传文件大小限制了500K ,所以用了webpack dll来进行拆分打包,我将拆分
的包分为三部分:
vue生态包( vue 、 vuex 、 vue-router 、 vuex-class 、 vue-class-component 等周边生态的库)
vue插件包( vee-validate 、内部UI库,图片预览等vue插件库)
第三方包( axios 、内部一些错误统计、上报,员工水印等这些脱离于vue的第三方库)
三部分的包名分别是 vue.dll.js 、 plugin.dll.js 、 lib.dll.js ,这样的好处是结构清晰,最重要的原因还是分解包的大小,降低到500K
以内
但是在进行dll打包后,我惊奇地发现 vue.dll.js 和 plugin.dll.js 中会包含重复的vue的dist代码
下面是分别是前两部分的bundle分析图
可以看到这俩dll都包含了vue
那么要分析问题原因,先说一下我的DLL的配置吧
DLL配置配置
因为webpack支持多entry,所以一般多入口dll打包的话,首先会考虑一个webpack配置,多个entry入口,所以可能会出现
// webpack.dll.conf.js
module.exports = {
// 其他配置先省略
entry: {
vue: ['vue', 'vuex', 'vue-router', ...],
plugin: ['vee-validate', '内部UI库', ...],
lib: ['axios', 'dayjs', ...]
},
plugins: [
new webpack.DllPlugin({
// dll.配置
})
]
}
但是亲测这样打包出来的文件依然有上述问题
所以结合我在之前公司所实践的 webpack multi compiler 方式,参考webpack multi compiler ,我把webpack的配置一分为
三,每一个dll包都有一个webpack配置,即
// config.js
exports.dll = [
{
name: 'vue',
libs: ['vue', 'vuex', 'vue-router', 'vuex-class', 'vue-class-component']
},
{
name: 'lib',
libs: [axios', 'dayjs', '第三方库']
},
{
name: 'plugin',
libs: ['vee-validate', 'v-viewer', 'vue插件库']
}
]
// webpack.dll.conf.js
module.exports = config.dll.map(function (vendor) {