一次vue-cli 2.x项目打包优化经历(优化xlsx插件)

in 系统环境
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

一、分析各模块打包后大小

用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,也避免组件打包后很大。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看