webpack的可視化資源分析工具webpack-bundle-analyzer的使用

隨着項目越來約龐大，致使構建包的時候速度緩慢！

首先推薦使用wepback的可視化資源分析工具。如下給出webpack-bundle-analyzer配置【vue-cli構建項目時會自動配置好】

• 安裝webpack-bundle-analyzer
  控制檯輸入npm/cnpm install --save-dev webpack-bundle-analyzer

• config/index.js文件中

  module.exports = {
    build: {
    ...
      // Run the build command with an extra argument to
      // View the bundle analyzer report after build finishes:
      // `npm run build --report`
      // Set to `true` or `false` to always turn it on or off
      bundleAnalyzerReport: process.env.npm_config_report
    }
    ...
  }

• webpack生產環境中 build/webpack.prod.conf.js文件中

  ...
  if (config.build.bundleAnalyzerReport) {
    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  }
  ...

• 開始使用webpack-bundle-analyzer
  控制檯輸入cnpm run build --report
  等待構建完成後，在瀏覽器中輸入localhost:8888打開分析結果，就能夠開始分析啦。拉拉拉拉拉！開心.png
  瀏覽器打開分析結果，大概長這個樣子喲

  

分析結果出來了，接下來就能夠開始優化啦