首页加载速度优

Spa 单页面的加载过程

首先就是 html,也就是 FP 阶段

html

<div id="app"></div>

页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来渲染在页面上了

然后是静态资源 css，js 请求和加载，之后解析 js，生成 HTML,也就是 FCP 阶段，css,js 资源加载下来了，首次的内容绘制，有一个大结构了

html

<div id="app">
  <div class="header"></div>
</div>

比如 app 根目录里面有一个 header,div

最后,就是 FMP,ajax 请求数据之后,首次有效绘制,就是页面加载差不多了，但是可能图片还没加载出来

总结

从 FP 到 FMP 这个过程全是白屏，可能你的 header 如果有啥大背景色啊，这个背景色或许会出来,ajax 之后，才会真正去解析我们的数据,把数据放入我们的 html 标签中

首页加载慢的原因

在 vue 项目中，引入到项目中的 js,css 都会被打包进入 vendor.js,如果引入的第三方库众多，最后打包后的 vendor.js 就会体积庞大，浏览器再加载该文件后才会进入首屏，如果 vendor.js 体积过大，那么加载的时间就越久，白屏的时间就越长

加载速度慢解决方案

分离打包第三方资源包

在 build 文件夹下的 webpack.base.conf.js 中配置 externals 可以分离打包第三方资源包，key 是依赖包的名称，value 是源码抛出来的全局变量,这样打包后这些文件就不会打包到 vendor.js 和 app.js 中，会大大减少打包体积。(尤其是你的项目用了多个三方库)

这个做法就是可以不把这些资源打包到 bundle 和 vendor.js 中，而是在运行时去获取需要的依赖和资源，大大减少打包的体积。

第三方库使用 CDN 引入

在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用 CDN 外部加载，在 index.html 中从 CDN 引入组件，去掉

其他页面的组件 import，修改 webpack.base.config.js，在 externals 中加入该组件，这是为了避免编译时找不到组件报错。

//这里是我再项目中的配置
//切记只适用于测试，要是上线一定是购买付费的
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

vue-router 路由懒加载

这个是相当重要的一步,这步会大大减少打包后的体积，提升加载速度

在访问到相关页面才加载对应的路由和资源，才是正确的，否则全在初始化项目时加载，那么首屏时间就会很久。

静态资源压缩，代码压缩，图片压缩

开启 gzip 压缩，（这个需要服务端配合）
图片压缩
尽量使用 icon 代替图片
js 代码压缩
css 代码压缩

不要滥用三方库

尽量一个项目只使用一个库，不要为了方便使用多个库而忽略了性能。

去掉编译中的 map 文件

为了避免部署打包体积过大，我们通常去掉源文件（就是打包后看不到源代码),打包后的体积会小很多

代码层面的优化

项目组件化，去掉冗余的代码
正式环境去掉 console.log
index.html 页面中将 js 文件放到页面最底部，css 文件放在<header>中使用 link 引入。

这么做的原因是因为浏览器渲染的机制是自上而下的，如果把 js 文件放到头部渲染，等 js 文件渲染完成才开始绘制页面，这样速度会很慢，并且会受到 css 渲染的阻塞，所以要把 js 文件放到最底部，并且一些没有关联性的文件可以采用异步加载

解决白屏，体验优化

上边已经讲述了优化问题，把所有的优化都做完之后，加载速度有了显著提升，把所有的优化都做完之后，加载速度有了显著提升}把所有的优化都做完之后，加载速度有了显著提升把所有的优化都做完之后，加载速度有了显著提升，但是再网慢的时候还是会有白屏，所以再白屏期间加骨架屏和 loading 就显得格外重要了。

html

<body>
  //这里亲测有效，放心使用
  <div id="app">
    // 我们只需要再这里添加loading图或者骨架屏，有人会说怎么控制它的显示隐藏啊，
    //不用担心，再项目初始化完成后会自动替换为你的页面。
    <div class="self-loading">页面正快马加鞭赶来，请耐心等待</div>
  </div>
</body>