一次vue-cli 2.x项目打包优化经历(优化xlsx插件)
2023-09-27 14:26:44 时间
一、分析各模块打包后大小
用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,也避免组件打包后很大。
相关文章
- [转] vue之computed和watch
- vue - 减少打包后的体积
- 【Vue】项目打包部署到iis服务器中
- vue-iview-admin项目过大导致打包失败
- Vue 3.0 && Nginx 项目打包部署知识都在这了~
- Vue - cli3 项目打包方法及注意事项(cli 其他版本可进行参考)
- Vue 页面载入时立刻触发某个函数
- Vue 中关于页面全屏登录页面无法全屏解决
- webpack4+vue打包简单入门
- vue-cli4打包优化
- 记录Vue打包或保存频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
- vue-cli3.0 多环境打包配置
- vue---向后台添加数据--删除数据--事件方法传参---在单页面配置url请求地址--暂时没有用到webpack
- vue项目打包步骤及运行打包项目
- vue中的main.js打开直接报错问题解决
- vue cli创建vue3项目
- vue基础 Vue.extend
- 在vue中引入layer弹框的简易方法
- vue+electron 打包后刷新,页面空白
- Vue打包项目图片等静态资源的处理
- vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除
- springboot+vue影城管理系统(源码+文档)
- springboot+vue租房网站(源码+文档)
- 学习VUE时,利用webpack打包的错误处理方法
- vue-解决Vue打包上线之后部分CSS不生效的问题
- vue项目打包后字体文件路径出错的解决办法
- vue封装组件,类似elementUI组件库打包发布到npm上