解决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 使用手册(五)
Sep 23 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 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图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
js常见遍历操作小结
2019/06/06 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
简单租房协议书范本
2014/08/20 职场文书
作风转变心得体会
2014/09/02 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
股权转让协议范本
2014/12/07 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书