一次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，也避免组件打包后很大。