网络包dll打包复制问题的优化解决方案

这里我就不介绍webpack dll的用法了。网上有很多。今天我想讲一个使用dll插件过程中的包依赖问题，导致类型化的包包含重复代码。

优化背景

最近在优化公司项目时，因为内部CDN上传文件大小限制在500K，所以使用了webpack dll进行拆分打包。我将拆分后的包分为三部分：

Vue生态包(vue、vuex、vue-router、vuex-class、vue-class-component等外围生态库。)vue插件包(vee-validate等vue插件库、内部UI库、图片预览等。)第三方包(axios、内部错误统计、报告、员工水印等。与vue的第三方库分离。三个部分的包名分别是vue.dll.js、plugin.dll.js、lib.dll.js这样做的好处是结构清晰，最重要的原因是对包进行了分解。尺寸缩小到50万k以内。

但是打包dll后，我惊讶地发现vue.dll.js和plugin.dll.js包含重复的vue dist代码

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

您可以看到两个dll都包含vue

然后要分析问题的原因，我们先来说说我的DLL的配置

DLL配置

因为webpack支持多个条目，一般来说，如果你打包一个多条目dll，你会首先考虑一个webpack配置和多个条目条目，所以它可能会出现

//web pack . dll . conf . js module . exports={//其他配置省略entry: {vue: ['vue '，' vuex '，' vue-router '，]，插件3360 ['vee-validate '，'内部UI库。]，lib: ['axios '，' dayjs '，]}，plugins: [newwebpack。dll插件({//dll。配置})]}，但是以这种方式打包的文件仍然存在上述问题

因此，结合我在之前公司练习的webpack多编译器方法，参考webpack多编译器，我把webpack的配置分为三个部分，每个dll包都有一个webpack配置，即

//config.jsexports.dll=[{ name : ' vue '，libs 3360[' Vue '，' vuex '，' vue-router '，' vuex-class '，' vue-class-component'] }，{ name: 'lib '，libs 3360[axios '，' dayjs '，'第三方库'] }，{name3360' plugin '，libs 3360[' vee-validate '，' v-viewer '，Vue插件库']}]//webpack.dll.conf.jsmodule导出。供应商. libs }，插件：[新的webpack.dll插件({//dll。configuration })]} })//dll . jsconst dllconfig=require('。/web pack . dll . conf’)web pack(dll config，function (err，Stats) {if (err) throw err //处理Stats相关信息})我以为这样可以解决问题，但现实是不能，所以我得先分析一下问题

分析问题

仔细调查后发现，vue在内部UI库中是单独引用的，即有

从“Vue”//导入Vue.//Vue相关操作//Vue.prototype.$isServer等。这样，在多条目打包和多编译器模式下都会出现重复的包

解决办法

分析dll的原理，其实dll打包的时候，会把所有包含的库做一个索引，写在一个清单文件里，然后引用dll的时候只需要引用这个清单文件

所以我在想，如果plugin.dll.js依赖于vue.dll.js中的vue，那么在打包plugin.dll.js的时候，能不能先打包vue.dll.js再参考vue.dll.js？

心比行动好，赶紧试试，做以下改变

//config.jsexports.dll=[{ name : ' vue '，libs: ['vue '，' vuex '，' vue-router '，' vuex-class '，' vue-class-component'] }，{ name: 'lib '，Libs: [axios '，' dayjs '，'第三方库'] }，{name3360' plugin '，libs 3360[' vee-validate '，' v-viewer '，' vue插件库']，ref 3: ' vue ' }]//webpack.dll.conf.js//dll插件({//dll配置})]} if (item.ref) {//这是重点。//在带有ref的dll配置中，插入dll引用的插件。内容为manifest base . plugins . push(new web pack . dll reference plugin({//dll reference manifest文件路径' }的dll包，其他配置manifest: '依赖于该包))} return base })}//根据是否存在ref依赖关系，区分基本配置和ref config const[base venders，ref venders]=config . dll venders . reduce((config，v)={config [v.ref？1 : 0].push(v) return config}，[ []，[]])//生成base config const getconfig=function(){ return gen(base venders)}//生成ref config const getref config=function(){ return gen(ref venders)}该模块. exports={getconfig，getref config }//dll . jsconst dllconfig=require('。/web pack . dll . conf ')//因为refconfig依赖于基本配置，因此，请确保首先打包基本配置。const run web pack=function(config){ return new promise(function(resolve){ web pack(config，function (err，Stats) {if (err) throwerr//.resolve ()})})模块。exports=函数run(){ runwebpack(dllconfig . getconfig())。那么(()=runwebpack(dllconfig . getrefconfig()))整体上具有以下结构

最关键的一步是plugin.dl.js会引用vue.dll.js的清单文件，这样公共部分vue只会出现在vue.dll.js中，plugin.dll.js之后的包分析图如下

可以清楚的看到plugin.dll.js中没有vue dist，包的体积已经优化了：v:

可优化项目

其实上面的优化只考虑了一个依赖，那么如果plugin.dll.js同时依赖vue.dll.js和lib.dll.js呢？如果vue.dll.js此时也依赖lib.dll.js呢？

如果出现这种情况，请考虑是否需要先拆分dll包。拆分合理吗？

然后根据依赖顺序思考如何思考包装顺序，如果有循环依赖怎么办。

由于这种情况在当前的优化需求中没有出现(这种情况应该很少见)，所以我这里没有解决这些问题

摘要

参照普通打包中dll引用插件引用dll包清单的方式，如果多个dll包中存在依赖关系，导致重复打包，可以在依赖包中使用dll引用插件引用依赖包的dll清单。但是这种情况下要注意dll包的打包顺序，依赖包的dll要在依赖包的dll之前打包。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。