Vue webpack

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

Jimmy Wei 2019/11/04 21:22:20
65

連結

解決什麼問題

  • 圖形可視化 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

頁面

Jimmy Wei