如何通过实战优化Vue项目首屏加载速度？

本文共计1670个文字，预计阅读时间需要7分钟。

问题+单页面应用的一个问题是，首页加载东西过多，加载时间过长。尤其是在移动端，单页面应用的首页加载优化更是至关重要的话题。下面我会写出我在项目中做的一些优化，希望对大家有所帮助。

问题

单页面应用的一个问题就是首页加载东西过多，加载时间过长。特别在移动端，单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化，希望大家能够相互讨论，共同进步。

我的项目 vue-cli3构建的，vue+vue-router+vuex，UI框架选用 element-ui，ajax方案选用 axios，服务器使用Nginx 。用到的这些技术都是现在用的比较广泛的，看到这篇文章，我估计你和我用的技术应该差不多。

第一步：webpack-bundle-analyzer 分析

首页我们来看看没有经过任何优化的打包分析，vue-cli3的项目直接 vue-cli-service build --report 就会生成一个report.html，打开这个html就能看到，不是vue-cli3的项目需要自行安装这个插件，参考链接， 点击 。