一、分析各模块打包后大小
用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,也避免组件打包后很大。