解决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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
Prototype使用指南之array.js
Jan 10 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
Vue基础配置讲解
Nov 29 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
javascript String 对象
2008/04/25 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
Django+Vue跨域环境配置详解
2018/07/06 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python中datetime常用时间处理方法
2015/06/15 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python基础教程项目二之画幅好画
2018/04/02 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
潘婷洗发水广告词
2014/03/14 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
环境卫生整治简报
2015/07/20 职场文书