I. Analyze the size of each module after packaging

The project created with Vue-CLI has Webpack-Bundle-Analyzer integrated. See the file build/webpack. Prod. Conf., js code is as follows:

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

After running NPM run build –report, you will be prompted:

Webpack Bundle Analyzer is started at
Use Ctrl+C to close it

Details can be found at the website.

2. Discover the larger packaged modules in the project

Found XLSX (making official address: https://github.com/SheetJS/js… The package is large because there are many components that reference import XLSX from ‘XLSX’, and every component will contain this XLSX.

Three, optimize

Place the reference in SRC /main.js, reference it once, and bind it to the prototype of Vue.

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

This.$XLSX can be used in other components.

Four, conclusion

A reference, bound to Vue’s prototype, to be used in the component. This prevents the components from being imported every time and prevents the components from being packaged in large packages.