vue项目使用webpack打包的文件过大

场景

最近被反馈说用vue做的一个官网首次加载很慢，要好多秒，需要进行一下优化，下面说一下我的探索历程。
1.这是中途接手的一个项目，我发现里面有一些本地的第三方库并没有用到或者node modules里已经有了，比如font awesome，bootstrap等，我就把她们删掉了，还有多余的图片也删掉了。
2.从网上搜了方法，把config文件夹下的index.js文件里的productionSourceMap本来是true，设为了false，就是不生成map文件了，至此进行了一次打包，整个文件夹大小是少了很多。
3.打开官网的速度快了一些，但是还要5-6秒，然后发现一些js文件很大，比如app.js和vendor.js都将近1M了。
这个时候去查看路由文件，一开始是没有进行路由懒加载，后来改为路由懒加载之后app.js文件变小了。
4.但是这个时候打开官网的速度还是慢的，因为vendor.js也很大，从网上搜索方法，说引入第三方库太多了，使用cdn，当时尝试vue和elementUI使用cdn引入，还要在webpack.base.conf.js里加externals: {这里写使用cdn引入的库的键值对}是快了，但是后面发现还有更快的方法。
5.最终我没有做第四步，也就是使用cdn，而是使用了gzip,先npm install --save-dev [email protected], 然后前端打开config文件夹下的index.js文件，找到productionGzip设置为true。之后让后台nginx开启gzip模式访问。这个时候再打开官网的速度就加快很多了，目前一两秒就可以加载出来了呢。

总结

vue项目使用webpack打包的文件过大的解决方法我觉得有如下这些

1. 删除不需要的文件
2. 路由进行懒加载
3. config/index.js 里的productionSourceMap设置为false
4. 一些第三方库可以使用cdn引入，webpack.base.conf.js里将cdn引入的库放在externals中
5. 使用gzip进行压缩

好啦，就这些啦，花费了一天半的时间弄这个，一定要记录一下咯！

对咯，还有一个问题，就是如果使用cdn引入vue的话，script标签一定不能放在下面，这样会报Vue is not defined,放在上面就不会报错了，多亏从网上看到了如下两句话才解决问题。

1. 不要把任何页面内容写到 body、head 外面。

2. app.js 插入到了你写的 script 的前面，获取不到 Vue。