一次vue-cli 2.x項目打包優化經歷（優化xlsx插件）

1、分析各模塊打包後大小

用vue-cli建立的項目，已經集成 webpack-bundle-analyzer。
詳見文件 build/webpack.prod.conf.js，代碼以下：

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

在該網址上可查看詳細信息。

2、發現項目裏打包後比較大的模塊

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

3、優化

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

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

其餘組件裏使用，直接調用this.$XLSX就能夠了。

4、結論

一次引用，綁定到Vue的prototype上，在組件裏使用。這樣能避免組件每次都import，也避免組件打包後很大。