解决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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
angular6 填坑之sdk的方法
Dec 27 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
php 动态执行带有参数的类方法
2009/04/10 PHP
如何使用Strace调试工具
2013/06/03 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
python str与repr的区别
2013/03/23 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python编写俄罗斯方块
2020/03/13 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
通息工程毕业生自荐信
2013/10/16 职场文书
电子专业推荐信范文
2013/11/18 职场文书
经典毕业生求职信
2014/07/12 职场文书
五年级上册复习计划
2015/01/19 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
浅谈Python魔法方法
2021/06/28 Java/Android