vue導(dǎo)入新工程node_modules依賴

問題

再使用vue 的可視化面板導(dǎo)入新的工程使，新手的界面往往會跳出這樣一個彈窗

我當(dāng)時也很懵逼，不知所措，心里在想：大哥，你到告訴我裝什么依賴?。。?！反正當(dāng)時一萬個xxx涌上了心頭。

解決

通過查資料完美的解決了：

主要是聽話乖乖的安裝 node_modules依賴即可，安裝步驟如下：

1.在cmd中進(jìn)入到項目所在的目錄（這個很重要！！因為之前都是在全局中安裝的）

2.執(zhí)行npm install

3.重新在可視化面板中導(dǎo)入就可以了

記錄排查node_modules包為什么會越來越大？

1. 事件背景

中間接手一個團(tuán)隊的項目，npm i 之后，啟動服務(wù)腳本，正常運(yùn)行，整個項目很簡單，用的若依模板，但是運(yùn)行幾天后發(fā)現(xiàn)，硬盤少了十幾個G,一開始，還以為是系統(tǒng)的垃圾緩存，清了下，發(fā)現(xiàn)遠(yuǎn)遠(yuǎn)達(dá)不到少的空間，想想這幾天干的事，箭頭直指該項目，用npkill跑了下，果然node_moudules 竟然夸張有18個G。

2. 排查過程

現(xiàn)象

• 刪除node_modules,重新安裝，只有幾百兆的大小。
• 運(yùn)行npm run dev命令之后，會立即增加幾十兆，重復(fù)多次運(yùn)行，發(fā)現(xiàn)未增加空間。
• 修改代碼，實時編譯之后，發(fā)現(xiàn)空間增加5兆左右，只要修改一次就增加一次。

嘗試解決方案

• 替換包管理工具，yarn 發(fā)現(xiàn)問題依舊存在。

考慮是不是緩存引起

• 查閱vue-cli官網(wǎng)，發(fā)現(xiàn)官網(wǎng)有這么一句話。

至此，.cache文件夾進(jìn)入視野。

是不是這個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，但是現(xiàn)象依舊存在。

會不會是其他插件引起的，仔細(xì)觀察后發(fā)現(xiàn)，.cache中的compression-webpack-plugin每次增加的空間，正好是整個node_modules增加的空間。

查看vue.config.js，插件的配置確實存在compression-webpack-plugin，且沒有區(qū)分環(huán)境。

直接先注釋，運(yùn)行項目，觀察現(xiàn)象消失。

至此，問題終于定位到了。

3. 解決方案

• compression-webpack-plugin，壓縮資源，配合nginx加速資源加載，優(yōu)化體驗。
• 解決方式：針對該插件直接區(qū)分下環(huán)境，只有在生產(chǎn)打包的時候，進(jìn)行啟用即可。 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論