webpack 解决依赖,重复打包的问题

 我来答
天罗网17
2022-06-01 · TA获得超过6182个赞
知道小有建树答主
回答量:306
采纳率:100%
帮助的人:72.6万
展开全部

或者在 vue.config里面可以使用 chainWebpack链式配置方式去配置
关于chainWebpack与configureWebpack 可以看我之前写的文章, 传送门

运行打包命令之后就会打开一个可视化页面。如下图

左侧有个侧边栏显示打包的依赖,可以看到打包后每个chunk的大小。以及开启gzip压缩后大小比较等

从图中我们可以看到md5.js这个依赖被打包在了三个模块里面,左侧搜索输入md5,右边会跟着变红色。

根据各方的查找说解决这个重复打包的问题只需要 配置一个路径别名。就会强制引入同一个路径的文件,按道理来说也是这样。

可是最终却怎么也不行,就算配置了路径别名还是重复打包了依赖。怎么也想不明白。最后打开npm关于md5.js这个插件,如下图:

可以发现他这个插件的引入方式只支持 CommonJS 引入方式,并不支持es6 module 的引入方式。提到这个就要提提 CommonJS跟ES6 module的模块化的区别了
CommonJs 和 ES6 Module 的区别

所以可以发现 CommonJs导出的是变量的一份拷贝。这就知道为什么我们配置了路径别名还是会重复打包了,哪里有引入他就会拷贝一份。所以哪里用到了就会打包多少份。

那怎么办?难道没办法了吗?
天无绝人之路,此时其实可以使用 dll打包方式,将他打包到一个dll.js里面。因为md5这个库是不怎么变化的。而且都是公用的。

如下是dll打包配置

可以看到我们已经将md5也一起打包进dll里面了。

我们来看看打包分析工具生成的视图

解决依赖重复打包的问题有三种方式

1.配置路径别名,强制使用统一路径(前提是这个依赖必须支持es6 module引入方式。不然也只是拷贝)

第三种cdn方式后面我会专门写一篇文章来介绍
文章传送门

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式