今天擼完登入模組，打包的時候發現，單一個登入頁面打包完的體積竟然達到了740KB！


模組是基於Vue全家桶 + element ui編寫的，但即使全引入使用，也不應該達到這麼誇張的一個體積。

事出反常必有妖，用Cli初始化專案時附帶的webpack-bundle-analyzer檢視打包情況，新增一個scripts，"analyz": "set NODE_ENV=production && set npm_config_report=true && npm run dist"，然後執行npm run analyz，得出如下結果

由此可見問題出在element ui上面。

經過一番排查，將問題定位在

這一個為了方便拓展和統一行為，將通知元件封裝起來的js檔案裡面。

通過@element-ui/src/index.js的程式碼分析，有可能在獨立的js檔案引用的時候將整個element ui庫再引用了一遍，所以由此入手進行改造引用方式

然後重新打包

直接減少到了145KB！！

其他元件在獨立js引用的時候應該也是如此。
希望能幫助大家避免踩坑。