解决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 蒙版进度条(结合图片)
Mar 10 Javascript
Javascript Object.extend
May 18 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
在vue中使用console.log无效的解决
Aug 09 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
php实现异步数据调用的方法
2015/12/24 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
vue中监听返回键问题
2019/08/28 Javascript
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
项目投资合作意向书
2014/07/29 职场文书
岗位职责说明书模板
2014/07/30 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
车辆年检委托书范本
2014/10/14 职场文书
长城导游词400字
2015/01/30 职场文书
七一建党节慰问信
2015/02/14 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
健康教育主题班会
2015/08/14 职场文书
代码复现python目标检测yolo3详解预测
2022/05/06 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL