vue之打包優化

2021-08-29 05:38:17 字數 897 閱讀 5828

最近寫專案,4個平台的專案由乙個**庫管理,超過50個.vue檔案,導致**量過大,每次構建打包速度都很慢,

下面是針對vue打包構建優化的一些測試結果:

第一次npm run dev :

第一次npm run build構建:

優化修改如下:

1,採用cdn載入ui庫,把不常改變的庫放到index.html中,通過cdn引入

2,修改build/webpack.base.conf.js檔案,在 module.exports = 中新增**,其目的是:這樣webpack就不會把vue.js, vue-router, iview庫打包了

externals: ,
3,取消生成map檔案,找到config/index.js中的productionsourcemap: true,把true改為false;

/**

* source maps

*/productionsourcemap: false,

優化後npm run dev:

優化後npm run build構建:

Vue專案打包優化

專案寫完了,專案需要打包才能上線 打包命令 yarn build 打包完目錄檔案的說明 帶 chunk vendors 的都是 第三方的依賴包 打完包的 可以直接於伺服器環境根目錄執行 不需要額外配置 外掛程式 live server 全域性安裝 npm i live server g 啟動 只需要...

刪除vue打包大小限制 vue 打包優化大小

yarn run build report file size gzipped dist js chunk vendors.df6b5bce.js 141.57 kib 49.51 kib 以上命令,build 後會生成report.html,該檔案顯示引用的依賴包大小。image.png 主要為v...

vue極致打包 Vue之不完美的極致優化

第三方按需載入,比如 element按需載入,用了哪些元件就之引入哪些元件。main.js import from element ui vue.component button.name,button vue.component select.name,select 或寫為 vue.use but...