解决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 相关文章推荐
网页防止tab键的使用快速解决方法
Nov 07 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
js实现延迟加载的方法
Jun 24 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
动态Axios的配置步骤详解
Jan 12 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
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数组实例总结与说明
2011/08/23 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
给民警的表扬信
2014/01/08 职场文书
新学期家长寄语
2014/01/19 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
汽车转让协议书范本
2014/12/07 职场文书
毕业生个人总结
2015/02/28 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
nginx实现动静分离的方法示例
2021/11/07 Servers