解决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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
jQuery.each()用法分享
Jul 31 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
javascript中数组方法汇总
Jul 07 Javascript
js格式化时间的方法
Dec 18 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JavaScript语句错误throw、try及catch实例解析
Aug 18 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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
解决yum对python依赖版本问题
2019/07/05 Python
python模拟实现斗地主发牌
2020/01/07 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
运动会广播稿400字
2014/01/25 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
求职毕业生自荐书
2014/02/08 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
自荐信格式模板
2015/03/27 职场文书
民事答辩状格式范文
2015/05/21 职场文书