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

執行npm run build --report後，會提示：

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it
 

在該網址上可檢視詳細資訊。

二、發現專案裡打包後比較大的模組

發現xlsx（官方github地址：https://github.com/SheetJS/js...）打包後很大，因為在好多元件裡都引用了 import XLSX from 'xlsx'，每個元件都會包含這個xlsx。

三、優化

將引用放在 src/main.js 中，只引用一次，再繫結的Vue的prototype上。

import Vue from 'vue'
import XLSX from 'xlsx'
Vue.prototype.$XLSX = XLSX

其他元件裡使用，直接呼叫this.$XLSX就可以了。

四、結論

一次引用，繫結到Vue的prototype上，在元件裡使用。這樣能避免元件每次都import，也避免元件打包後很大。

原文地址：https://segmentfault.com/a/1190000014284449