解决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检查日期格式的函数[比较全]
Oct 17 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
输入框跟随文字内容适配宽实现示例
Aug 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Python验证码识别处理实例
2015/12/28 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
Java语言程序设计测试题改错题部分
2014/07/22 面试题
股权投资意向书
2014/04/01 职场文书
解除财产保全担保书
2014/05/20 职场文书
个人委托书范本汇总
2014/10/01 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
python实现高效的遗传算法
2021/04/07 Python
python实现简易名片管理系统
2021/04/11 Python
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏