VUE首屏載入優化 效能優化分析外掛安裝分享
阿新 • • 發佈:2022-03-08
優化背景: 專案上線後 第一次進入專案要等待接近50s才能進入頁面。一開始覺得是電腦配置問題或者網路問題。F12後發現載入資源過慢 其中一個chunk-***js檔案有10m 載入了45s 。我們使用的是2m頻寬 ,實際下載速度200kb/s上下。 差不多是要50s左右。所以想知道為啥這個js這麼大,需要安裝一個打包分析外掛。-webpack-bundle-analyzer
第一步 :在專案中下載 安裝npm install webpack-bundle-analyzer –save-dev
第二步:配置
1、 在vue.config.js 檔案中 加入
chainWebpack: config => {
if (process.env.use_analyzer) { // 分析
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
},
是在chainWebpack 這個屬性裡面加入
2、還需要在package.json 裡面加入命令列
"scripts": {
"serve": "vue-cli-service serve --host 0.0.0.0",
"build": "vue-cli-service build",
"analyzer": "cross-env use_analyzer=true npm run build" //新增的這行