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

这篇文章主要为大家详细介绍了使用vue打包时vendor文件过大或者是app.js文件很大的问题，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

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

 

我的解决办法：

 

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

【图片暂缺】

然后找到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），这样一开始进入页面就会把所有的路由资源都加载，如果项目大，加载的内容就会很多，等待的时间页就会越长，导致给用户的不好的体验效果。

【图片暂缺】

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

【图片暂缺】

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

【图片暂缺】

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

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

【图片暂缺】

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

 

总结

 

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

本文来自：http://www.q1010.com/184/5313-0.html

注：关于使用vue打包时vendor文件过大或者是app.js文件很大的问题的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js