1. 程式人生 > 其它 >VUE首屏載入優化 效能優化分析外掛安裝分享

VUE首屏載入優化 效能優化分析外掛安裝分享

優化背景: 專案上線後 第一次進入專案要等待接近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"   //新增的這行
    }, 第三步:執行 然後再終端輸入命令 npm run analyzer  會發現儲存 是因為少下了一個外掛 cross-env 使得您可以使用單個命令 npm i cross-env 之後再執行npm run analyzer 等打包完後會出現分析包介面 然後根據哪幾個外掛佔比比較大 進行拆分 和按需載入