vue首屏加载过慢是为什么？怎么解决？

最近在重构一个使用Vue做的网站，这个网站不可避免地出现了首屏加载过慢的问题，那么为什么出现这个问题？怎么解决这个问题呢？这就是本篇博客要讨论的话题。

一、vue首屏加载过慢的原因

1. 毋庸置疑的，网速慢肯定会导致首屏加载过慢，但是在这里我们不做讨论；
2. vue项目作为一个单页面应用，如果不对路由进行处理，在加载首页的时候，就会将所有组件全部加载，并向服务器请求数据，这必将拖慢加载速度；
3. 通过查看Network，发现整个网站加载试讲长达10几秒，加载时间最长的就是js、css文件和媒体文件及图片，如下图所示：

 

 看到这个接近7s才加载出来的js文件，我仿佛懂得了什么。

二、解决方案

1.Vue-router懒加载

什么是Vue-router懒加载？Vue-router懒加载就是按需加载组件，只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就加载，项目越大，对首屏加载的速度提升得越明显。代码如下：