[Vue-CLI] webpack-bundle 檔案分析

連結

• vue-cli-plugin-webpack-bundle-analyzer
• Webpack Bundle Analyzer

解決什麼問題

• 圖形可視化 webpack 輸出文件的大小的插件
• 了解 bundle 的內容
• 找出最大的 module

安裝步驟

安裝

npm i vue-cli-plugin-webpack-bundle-analyzer -save -dev 

新增 vue.config.js

修改 vue.config.js

• Vue chainWebpack
• Vue CLI 內部的 webpack 設定是通過 webpack-chain 維護
• 在 vue.config.js 中的 chainWebpack 定義具名的 loader 規則和具名插件

// 插件(plugin)，可以用來處理各種各樣的任務
// use 屬性，表示進行轉換時，應該使用哪個 loader
// require 屬性，用來引入插件
module.exports = {
  chainWebpack: config => {
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }
}

執行

npm run serve 

開啟

http://127.0.0.1:8888

頁面