一次vue-cli 2.x專案打包優化經歷（優化xlsx外掛）

cag2050發表於2018-04-10
Vue優化

一、分析各模組打包後大小

用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

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

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

發現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，也避免元件打包後很大。

相關文章