使用vue打包时vendor文件过大或者是app.js文件很大的问题


Posted in Javascript onJune 29, 2018

第一次使用vue2.0开发,之前都是用的angular1.x。在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右。。后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致文件很大。

我的解决办法:

  1、把不常改变的库放到index.html中,通过cdn引入,比如下面这样:

使用vue打包时vendor文件过大或者是app.js文件很大的问题

然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',
 },

这样webpack就不会把vue.js, vue-router, element-ui库打包了。声明一下,我把main.js中对element的引入删掉了,不然我发现打包后的app.css还是会把element的css打包进去,删掉后就没了。

然后你打包就会发现vendor文件小了很多~

如果你还不满足,请接着往下看·····

2、vue路由的懒加载(具体作用,官网查看哦,这里就不多介绍了)。

刚开始我们使用路由可能是下面这样(router.js),这样一开始进入页面就会把所有的路由资源都加载,如果项目大,加载的内容就会很多,等待的时间页就会越长,导致给用户的不好的体验效果。

使用vue打包时vendor文件过大或者是app.js文件很大的问题

为了把路由分模块,然后每次进入一个新页面才加载该页面所需要的资源(也就是异步加载路由),我们可以像下面这样使用(router.js):

使用vue打包时vendor文件过大或者是app.js文件很大的问题

然后你打包就会发现,多了很多1.xxxxx.js;2.xxxxx.js等等,而vendor.xxx.js没了,剩下app.js 和manifest.js,而且app.js还很小,我这里是100k多一点。

使用vue打包时vendor文件过大或者是app.js文件很大的问题

这里我没有生成map文件,这样打包速度快一些,整个项目文件也小很多(map文件一般都很大);

取消生成map文件,找到config/index.js ,修改下面箭头指向为false,就行了。

使用vue打包时vendor文件过大或者是app.js文件很大的问题

刚开始使用,一路磕磕碰碰在所难免,也借鉴了很多前辈们的经验,所以在这里记录一下,希望能帮到更多的人。

总结

以上所述是小编给大家介绍的使用vue打包时vendor文件过大或者是app.js文件很大的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 #Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 #Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 #Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 #Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 #Javascript
vue ssr 指南详读
Jun 29 #Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
You might like
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
鼓舞士气的口号
2014/06/16 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
大班上学期个人总结
2015/02/13 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
MySQL如何构建数据表索引
2021/05/13 MySQL
MySQL主从切换的超详细步骤
2022/06/28 MySQL