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

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

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

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

 

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

二、解决方案

1.Vue-router懒加载

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

/* 首页--------------首页 */
// 首页底部导航
const index = r => require.ensure([], () => r(require('@/pages/home/index/index')), 'group-index')
// 首页
const home = r => require.ensure([], () => r(require('@/pages/home/home/home')), 'group-index')

接下来就可以正常使用路由了。 

 

2.使用CDN加速

在做项目时，我们会用到很多库，采用cdn加载可以加快加载速度。详情可以查看Vue项目使用CDN优化首屏加载。

 

3. gzip压缩

 方法一：使用Nginx反向代理，配置nginx.conf文件，在http节点下加如下代码：

gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

方法二：使用node压缩，需要使用compression库，代码如下：

const compression = require('compression');
app.use(compression());

4.异步加载组件

 这里已经有前人栽好树，我们直接右转就可以了。vue异步组件(高级异步组件)使用场景及实践。

 5.服务端渲染

使用pug/jade、ejs、vue通用应用框架Nuxt等等都可以实现后端渲染，并且后端渲染还能对seo优化起到作用。这里配上Nuxt.js中文官网。