解决vue打包后vendor.js文件过大问题


Posted in Javascript onJuly 03, 2019

第一步、cdn引入各种包

index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包,如下图:

解决vue打包后vendor.js文件过大问题

第二步、在使用vue等包的地方,注释掉import引入

在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中

在main.js

解决vue打包后vendor.js文件过大问题

在store文件加中的index.js

解决vue打包后vendor.js文件过大问题

在api/request.js文件中

解决vue打包后vendor.js文件过大问题

在router/index.js文件中

解决vue打包后vendor.js文件过大问题

第三步、打包忽视掉vue等包

在webpack.base.conf.js

解决vue打包后vendor.js文件过大问题

第四步、如果打包后的文件还是比较大,就采用路由懒加载的方式加载路由

解决vue打包后vendor.js文件过大问题

最终打包结果

vendor.js的大小由原来的988k, 降到235k

解决vue打包后vendor.js文件过大问题

总结

以上所述是小编给大家介绍的解决vue打包后vendor.js文件过大问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 #Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 #Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 #Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
使用vue实现各类弹出框组件
Jul 03 #Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 #Javascript
使用微信SDK自定义分享的方法
Jul 03 #Javascript
You might like
Zerg基本策略
2020/03/14 星际争霸
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
ES6 Generator基本使用方法示例
2020/06/06 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
python实现翻译word表格小程序
2020/02/27 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书