Vue在开发WebApp的时候，有一个致命的缺点，那就是首次加载事件过长，本篇文章主要使用各种方法缩减文件大小，并不涉及服务端渲染。
环境
- Vue CLI3+Vue全家桶
- 服务器 1 核 2 GB 1 Mbps（最大128 kb/s）
分析工具
- VueCLI UI 下的分析工具
- 肉眼对比打包后文件大小
对优化方法的分类
- 下载资源阶段
- 加载渲染阶段
- 页面操作阶段
本文只讨论下载阶段
开始
直接启动npm run build得到结果：
image.png
可以发现文件十分的大，进入js 后发现了大量的
.map文件：
image.png
.map文件的作用：像地图一样指示出打包后文件运行错误的具体位置，对于一个打包上线的项目而言，这不仅没用，还具有风险，所以应该去掉，手动删除是笨比方法，只需要更改vue.config.js即可：
module.exports = {
//使用HTML5 History 应该使用绝对路径
publicPath: "/"
productionSourceMap: false
};
再次打包：
image.png
文件发生了巨大的变化，进去查看后发现没有了
.map文件，但是大家不要忘记了，前文中我的服务器宽带是1Mbps，也就是说最大的下载速度也就是128kb/s，虽然我使用了路由的懒加载，但是首屏的文件大小也有590kb:
image.png
计算一下大约需要4.6s才能下载到浏览器，而首屏加载不只需要这一个js文件，还有很多的css下载,Dom渲染，现在的加载事件大约是10s。
image.png
优化
我们启动 vue ui ,去编译页面看看都是那个依赖造成的。
image.png
结果发现muse-ui 和 swiper占了主要的锅。
虽然我对muse-ui使用了组件按需加载，但是我在
main.js中把所有的组件都引入进去了，所以等于没有按需引入，把不需要的组件引入删除后muse-ui占比可以看到明显下降，但是这不是今天的主角。
对于这种情况，一般的解决方法就是，阻止webpack打包，去引入CDN加速，我的服务器下载速度只有 128kb/s 而已，不如去让它引入CDN的代码，这样速度会大大提高。
还是在vue.config.js中添加：
//本文件
module.exports = {
//使用HTML5 History 应该使用绝对路径
publicPath: "/",
productionSourceMap: false,
configureWebpack: {
externals: {
vue:'Vue',
MuseUI: "muse-ui"
}
}
};
同时在index.html中加入muse-ui和Vue的CDN连接。
main.js中的muse-ui引入不需要改变，在vue,config.js中设置为外部后，main.js中就失效了，同时把Vue也设置为外部引入，因为muse-ui必须要在Vue实例化后才能引入，而index.html里面得引入是最开始执行的，会导致muse-ui未定义的错误。
打包后结果是：
image.png
image.png
大小减少了很多，页面也没有发生变化。
我们用同样的手段，把CDN上有的依赖全部使用外部引入。
image.png
image.png
到目前为止，缩减打包大小到达了我的极限了，对比最开始得3M，已经有的质的得飞跃。我的128kb/s的服务器也能够2s内就响应了。
其他优化
使用图片懒加载
压缩图片大小
总结
关于优化，最主要的还是图片的优化，最开始我这个项目打开需要25s，经过我把所有的图片进行压缩后，缩短到了10s,再压缩打包文件后，差不多1s多就完成了。
推荐
JPEG压缩：能压缩80% picdiet
