vue專案打包檔案過大優化

總結一下前端打包優化，我用的是vue-cli3     配置檔案vue.config.js

一、路由懶載入

每次進入乙個新頁面才載入該頁面所需要的資源

component: () => import('@/view/setting/setting.vue')

最好引入指定版本，避免更新導致專案出錯，從package.json檔案檢視版本

然後找到檔案vue.config.js,（ 我用的是vue-cli3不同版本設定不一樣，老版本是build/webpack.base.conf.js ），在 module.exports = 中新增以下**，這樣webpack就不會把這些庫打包了。

configurewebpack:config => 

// if(process.env.node_env==='production'))
// ]
// }
// }
},

三、使用gzip壓縮

安裝外掛程式

npm install compression-webpack-plugin

先引入外掛程式

const compressionplugin = require('compression-webpack-plugin');

configurewebpack:config => 

//gzip壓縮
if(process.env.node_env==='production'))]}
}},

webpack 打包檔案 vue 過大

在 build webpack.base.conf.js 檔案裡加上 externals 不需要打包的檔案就放寫在這裡，然後在 index.html 外連上這些庫 順便記錄乙個連線後面加入版本號 在 webpack.prod.conf.js 檔案裡 自己獲取乙個時間加在後面就可以了 官方 impor...

Vue專案打包優化

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

vue專案打包之後js檔案過大怎麼辦？

話不多說直接上圖 優化前 優化後 第一張圖中的 1.09 m是我的專案經過打包編譯之後的js檔案大小，確實有點大了，第一次開啟頁面的時候會比較慢。所以就需要想辦法來解決這個問題了。再檢視官網之後，發現官網給我們提供了乙個懶載入，相當於懶載入，你不開啟的時候是不會全部載入出來的，只有你需要用到的時候才...