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

問題

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

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

解決

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

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

1.在cmd中進(jìn)入到項(xiàng)目所在的目錄（這個(gè)很重要?。∫?yàn)橹岸际窃谌种邪惭b的）

2.執(zhí)行npm install

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

記錄排查node_modules包為什么會(huì)越來越大？

1. 事件背景

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

2. 排查過程

現(xiàn)象

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

嘗試解決方案

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

考慮是不是緩存引起

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

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

是不是這個(gè)loader引起的呢？是不是去除這個(gè)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');
? ?}
},

代碼打印，確實(shí)已刪除了loader，但是現(xiàn)象依舊存在。

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

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

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

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

3. 解決方案

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

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