安裝

npm install --save-dev webpack-bundle-analyzer //安裝webpack-bundle-analyzer
npm install cross-env –save -dev //解決 'NODE_ENV' 不是內部或外部命令，也不是可執行的程式或批處理檔案 的報錯

配置

/* webpack.base.conf.js檔案中 */
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode:
 
 "server",
      analyzerHost: "127.0.0.1",
      analyzerPort: 8888, // 執行後的埠號
      reportFilename: "report.html",
      defaultSizes: "parsed",
      openAnalyzer: true,
      generateStatsFile: false,
      statsFilename: "stats.json",
      statsOptions: null,
      logLevel: "info"
    })
  ]
});

/* package.json檔案中 */
 

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open --hot",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint"
 
: "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js",
    "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
  }

執行

npm run analyz

首屏載入優化

根據視覺化區域檢視元素可知,面積越大,所佔據的部分越多,就越需要減小