解决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 相关文章推荐
JS中style属性
Oct 11 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
vue element-ui读取pdf文件的方法
Nov 26 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
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
xmlHTTP实例
2006/10/24 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
分享Python字符串关键点
2015/12/13 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
2014年维稳工作总结
2014/11/18 职场文书
员工年终考核评语
2014/12/31 职场文书
文言文辞职信
2015/02/28 职场文书
消防演习通知
2015/04/25 职场文书
超市食品安全承诺书
2015/04/29 职场文书
人民检察院起诉书
2015/05/20 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
Java中try catch处理异常示例
2021/12/06 Java/Android
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers