解决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时间日期和毫秒的相互转换
Feb 22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
react 路由Link配置详解
Nov 11 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与java通过socket通信的实现代码
2013/10/21 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
jQuery制作简单柱状图实例
2015/01/28 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
js中new一个对象的过程
2017/02/20 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
Vue页面骨架屏的实现方法
2018/05/22 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python深入学习之对象的属性
2014/08/31 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python+django实现文件下载
2016/01/17 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Python中logger日志模块详解
2020/08/04 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
士力架广告词
2014/03/20 职场文书
蓝颜请假条
2014/04/11 职场文书
个人评语大全
2014/05/04 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
浅谈如何保证Mysql主从一致
2022/03/13 MySQL