webpack dll打包重复问题优化的解决


Posted in Javascript onOctober 10, 2018

关于webpack dll的使用,我这里不做过多介绍,网上都有,一撸一大把,今天我要说的是在使用dll plugin过程中出现的一个包依赖问题,这个问题导致打出来的包会包含重复的代码。

优化背景

最近在给公司项目优化的时候,由于 内部CDN上传文件大小限制了500K ,所以用了webpack dll来进行拆分打包,我将拆分的包分为三部分:

  • vue生态包( vuevuexvue-routervuex-classvue-class-component 等周边生态的库)
  • vue插件包( vee-validate 、内部UI库,图片预览等vue插件库)
  • 第三方包( axios 、内部一些错误统计、上报,员工水印等这些脱离于vue的第三方库)

三部分的包名分别是 vue.dll.jsplugin.dll.jslib.dll.js ,这样的好处是结构清晰,最重要的原因还是分解包的大小,降低到500K以内

但是在进行dll打包后,我惊奇地发现 vue.dll.jsplugin.dll.js 中会包含重复的vue的dist代码

下面是分别是前两部分的bundle分析图

webpack dll打包重复问题优化的解决

webpack dll打包重复问题优化的解决

可以看到这俩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) {
 return {
  // 省略其他配置
  entry: {
   [vendor.name]: vendor.libs
  },
  plugins: [
   new webpack.DllPlugin({
    // dll.配置
   })
  ]
 }
})
// dll.js

const dllConfig = require('./webpack.dll.conf')

webpack(dllConfig, function (err, stats) {
 if (err) throw err
 // 处理stats相关信息
})

本以为这样可以解决问题,但是现实却是不能,所以得先分析一下问题所在

分析问题

经过仔细的排查,发现是由于内部UI库中单独引用了vue,即在库中有

import Vue from 'vue'

// ...
// Vue相关操作
// Vue.prototype.$isServer等

这样不管是多入口打包还是multi compiler方式下都会出现重复的包

解决方法

分析dll的原理,其实dll在打包的时候会将所有包含的库做一个索引,写在一个manifest文件中,然后在引用dll的时候只需要引用这个manifest文件即可

所以我就在想,如果plugin.dll.js依赖于vue.dll.js中的vue,那么是否可以先打包vue.dll.js,然后在打包plugin.dll.js的时候引用vue.dll.js呢?

心动不如行动,赶紧尝试一下,做出如下修改

// 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插件库'],
  ref: 'vue'
 }
]
// webpack.dll.conf.js

// generate config
const gen = function (vendors) {
 return vendors.map(function (item) {
  const base = {
   entry: {
    [item.name]: item.libs
   },
   plugins: [
    new webpack.DllPlugin({
     // dll配置
    })
   ]
  }
  
  if (item.ref) {
   // 重点在这
   // 在有ref的dll配置中,插入dll reference的plugin,内容是所依赖的dll包的manifest
   base.plugins.push(new webpack.DllReferencePlugin({
    // dll reference其他配置
    manifest: '所依赖的dll包的manifest文件路径'
   }))
  }
  
  return base
 })
}

// 根据是否有ref依赖项,区分base config和ref config
const [baseVendors, refVendors] = config.dll.vendors.reduce((config, v) => {
 config[v.ref ? 1 : 0].push(v)
 return config
}, [
 [],
 []
])

// 生成base config
const getConfig = function () {
 return gen(baseVendors)
}

// 生成ref config
const getRefConfig = function () {
 return gen(refVendors)
}

module.exports = {
 getConfig,
 getRefConfig
}
// dll.js

const dllConfig = require('./webpack.dll.conf')

// 因为ref config依赖于base config,所以要保证base config先打包出来
const runWebpack = function (config) {
 return new Promise(function (resolve) {
  webpack(config, function (err, stats) {
   if (err) throw err
   // ...
   resolve()
  })
 })
}

module.exports = function run () {
 runWebpack(dllConfig.getConfig())
  .then(() => runWebpack(dllConfig.getRefConfig()))
}

整体变成了如下结构

webpack dll打包重复问题优化的解决

最关键的一步就是plugin.dl.js会引用vue.dll.js的manifest文件,这样公共部分vue,就只会出现在vue.dll.js中了,plugin.dll.js打包后的bundle分析图如下

webpack dll打包重复问题优化的解决

可以很明显地看到plugin.dll.js中已经没有vue dist的身影了,包的体积得到了优化:v:

可优化项

上述优化其实只考虑了一个依赖项,那么如果plugin.dll.js同时依赖于vue.dll.js和lib.dll.js呢?如果此时vue.dll.js也依赖于lib.dll.js呢?

如果出现上述情况,那么请先考虑dll包是否需要拆分?拆分是否合理?

然后再思考如何根据依赖顺序思考打包顺序,以及如果出现循环依赖,该怎么办?

由于目前优化需求中还未出现这种情况(这种情况应该很少很少很少见),所以我这边就没有解决这些问题了

总结

参考平常打包通过dll reference plugin来引用dll包的manifest的方式,如果多个dll包内出现了依赖,导致打包重复,那么是可以在依赖包中运用dll reference plugin来引用被依赖包的dll manifest,不过这样的话,需要注意dll包的打包顺序,被依赖包的dll要先于依赖包dll进行打包

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 #Javascript
Koa代理Http请求的示例代码
Oct 10 #Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 #Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 #jQuery
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 #Javascript
从零开始封装自己的自定义Vue组件
Oct 09 #Javascript
vue axios 简单封装以及思考
Oct 09 #Javascript
You might like
十大“创意”战术!
2020/03/04 星际争霸
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python入门篇之面向对象
2014/10/20 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
python config文件的读写操作示例
2019/09/27 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
Python修改DBF文件指定列
2020/12/19 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
爱心捐款倡议书
2014/04/14 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书