使用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 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
vue实现多条件和模糊搜索功能
May 28 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 使用post,get的一种简洁方式
2010/04/25 PHP
php简单生成随机数的方法
2015/07/30 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
javascript 函数式编程
2007/08/16 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
原生js实现验证码功能
2017/03/16 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python里反向传播算法详解
2020/11/22 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
在线课程:Skillshare
2019/04/02 全球购物
办护照工作证明范本
2014/01/14 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
代理协议书
2014/04/22 职场文书
青春励志演讲稿
2014/04/29 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015年科协工作总结
2015/05/19 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android