一、排查node_modules包为什么会越来越大
1. 事件背景
中间接手一个团队的项目,npm i 之后,启动服务脚本,正常运行,整个项目很简单,用的若依模板,但是运行几天后发现,硬盘少了十几个G,一开始,还以为是系统的垃圾缓存,清了下,发现远远达不到少的空间,想想这几天干的事,箭头直指该项目,用
npkill
跑了下,果然node_moudules
竟然夸张有18个G。
2. 排查过程
-
现象
- 删除
node_modules
,重新安装,只有几百兆的大小。 - 运行
npm run dev
命令之后,会立即增加几十兆,重复多次运行,发现未增加空间。 - 修改代码,实时编译之后,发现空间增加5兆左右,只要修改一次就增加一次。
- 删除
-
尝试解决方案文章来源:https://www.toymoban.com/news/detail-504033.html
- 替换包管理工具,yarn 发现问题依旧存在。
-
考虑是不是缓存引起文章来源地址https://www.toymoban.com/news/detail-504033.html
- 查阅
vue-cli
官网,发现官网有这么一句话。 - 至此,
.cache
文件夹进入视野。 - 是不是这个loader引起的呢?是不是去除这个
loader
就能解决该问题。- 在
vue.config.js
中的chainWebpack
中配置如下代码:module.exports = { chainWebpack(config) { config.module.rule('vue').uses.store.delete('cache-loader'); config.module.rule('js').uses.store.delete('cache-loader'); } },
- 代码打印,确实已删除了
loader
,但是现象依旧存在。
- 在
- 会不会是其他插件引起的,仔细观察后发现,
.cache
中的compression-webpack-plugin
每次增加的空间,正好是整个node_modules
增加的空间。 - 查看
vue.config.js
,插件的配置确实存在compression-webpack-plugin
,且没有区分环境。 - 直接先注释,运行项目,观察现象消失。
- 至此,问题终于定位到了。
- 查阅
3. 解决方案
-
compression-webpack-plugin
,压缩资源,配合nginx
加速资源加载,优化体验。 - 解决方式:针对该插件直接区分下环境,只有在生产打包的时候,进行启用即可。
到了这里,关于记录排查node_modules包为什么会越来越大?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!