解决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 相关文章推荐
jquery实现手风琴效果实例代码
Nov 15 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
微信小程序sessionid不一致问题解决
Aug 30 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 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
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue如何截取字符串
2019/05/06 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
python实现ipsec开权限实例
2014/11/11 Python
python回调函数用法实例分析
2015/05/09 Python
简单谈谈python中的多进程
2016/11/06 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
手写一个python迭代器过程详解
2019/08/27 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
领导干部考察材料
2014/02/08 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
优秀校长事迹材料
2014/12/24 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书