前端工程資源小優化

最近給vue專案優化了一下資源打包，有一些心得，記錄下來，供以後開發時參考，相信對其他人也有用。專案使用vue-cli搭建的，所以優化方向是基於vue-cli3的。

查詢原因，發現有如下配置：

// babel.config.js
module.exports = ,
],],
};// main.js
import '../../theme/index.css';

最後考慮到我們的需要是一定要使用自定義主題，所以做了如下修改：

// babel.config.js
module.exports = ,
],],
};

意思是，element ui庫使用自定義主題theme資料夾裡面的樣式。所以不會再把element ui庫裡面的css打包進vendor.css裡面了。

上面我們在babel.config.js裡面已經配置了element ui元件的按需載入，但是在實際引入元件的時候我們引入了多餘的元件，特別是time-picker和date-picker元件，佔了很大體積，於是我檢查了一遍，把多餘的元件刪除了。

這裡有必要提一下的是，如果你使用的是vue-cli3，那麼在package.json裡面加入如下指令：

"report": "vue-cli-service build --report"

然後執行npm run report，就可以在dist資料夾裡面生成乙個report.html，裡面非常直觀的顯示出打包的js的組成成分和大小，對減少打包體積很有幫助。

通過上面的指令npm run report，我們可以看到，moment.js的打包體積非常大，都快趕上element ui整個庫了。於是我想辦法減少moment.js的打包體積。

通過you-dont-need-momentjs可以看到好幾個moment.js的替代庫，但是由於它們都沒有utc的相關功能，而我們專案非常依賴moment.js的utc功能，所以我們專案並不能採用這些替代庫。

最後只能在moment.js上想辦法了，只能通過刪減它裡面的國際化內容來減少它的打包體積了。webpack官方也建議在使用moment.js的時候用ignoreplugin刪除它的國際化部分。

具體方法如下，只需要在vue.config.js裡面加入下面的配置就行了：

const webpack = require('webpack');
module.exports = ]);
},}