使用vue打包时 供应商文件太大或app.js文件太大

第一次用vue2.0开发，之前用过angular1.x。用vue-cli脚手架(Element-ui为ui)打包后，发现厂商文件很大，大概1M左右。后来看了资料，才知道webpack把所有的库都打包在一起，结果是一个很大的文件。

我的解决方案：

1.将不经常更换的库放入index.html，通过cdn引入，如下所示：

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

Externals: {'vue' :' vue '，' vue-router' 3360' vue router '，' element-ui' :' element '，}，这样webpack就不会打包vue.js，vue-router和element-ui库。记录一下，我在main.js中删除了element的引入，否则发现打包的app.css还是会打包element的css，删除后就没了。

那你打包的时候会发现厂商文件小很多~

如果你不满意，请继续往下看…

2.vue路由的懒加载(具体功能见官网，这里就不介绍了)。

在开始的时候，我们使用的路由可能如下(router.js)，这样在开始进入页面的时候就会加载所有的路由资源。如果项目比较大，加载的内容会比较多，等待页面的时间会比较长，导致用户体验不好。

为了将路由分成模块，然后每次加载新页面所需的资源(即异步加载路由)，我们可以使用(router.js)如下：

然后你会发现不止1个。