vue打包优化

当我们在打包vue项目时，总会发现第一次打开的时候会很卡，很慢，今天说说我经常用的优化方法，比较实用哦。

1，关闭sourceMap。

我们打包的时候会发现，map文件的会非常庞大，所以我们可以考虑关闭它们，另外大家注意这个vendor的文件，最后对比一下打包效果。
关闭sourceMap方法：在项目根目录 -> config -> index.js中找到这条命令，将其设置为false即可。重新打包以后你会发现map文件没有了，但是我们的vendor文件没有变小，接着往下看。

2，路由懒加载。

网上很多人介绍说开启路由懒加载模式会减少文件体积，但是我测试的时候并没有减少，不知道是我的设置方法不对还是怎么回事，修改路由的加载方式。

3，开启GZIP压缩。

在根目录 -> config -> index.js中将productionGzip设置为true，默认为false.

这里还需要服务器开启gzip功能，这里就不多说了。

4，不加载库文件(最主要方法)。

所谓的库文件，就是你引用的一些第三方文件，比如vue，vuex，element-ui等等，设置方法，在根目录 -> build -> webpack.base.conf.js文件末尾加入配置。

需要注意的是，如果配置错误，那么配置错误的文件还是会打包。保存一下重新打包，我们看下结果。

不到1KB，比之前的1.6M简直是一个天一个地了吧，你以为到这里就完事了，不！还没，如果你这个时候打开index.html文件，你会发现控制台会报错的。

5，注意事项。

为了解决上述错误，你需要将你的库文件下载至你的文件夹中，单独引用。
我在dist文件夹中新建了一个source文件夹，并将库文件下载到该文件夹中。

然后在index.html中引入这些文件，当然你也可以用cdn方法。

这个时候再打开index.html文件就不会有报错问题了，文件打开也是秒开。

好了，今天的分享就到这里了，个人见解，如有错误，欢迎各位大佬指教，谢。