Vue首屏加载优化 Vue首屏加载优化

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多就完成了。
推荐
【Vue首屏加载优化】JPEG压缩：能压缩80% picdiet