SPA单页应用首屏加载速度慢怎么解决？

什么是首屏时间

首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间，整个网站并不需要全部加载完成，但需要展示当前可视窗口中的内容。

白屏时间(First Paint)：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。
白屏时间 = 页面开始展示的时间点 - 开始请求的时间点
首屏时间(First Contentful Paint)：是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。
首屏时间 = 首屏内容渲染结束时间点 - 开始请求的时间点

如何计算首屏加载时间

1. 在控制台中的load显示首屏加载的时间
   

2. 通过window.performance 对象可以获取到当前页面与性能相关的信息

// 计算首屏加载的时间(s)
let awiatTime = (performance.timing.domComplete - performance.timing.navigationStart) / 1000;

为什么首屏加载速度慢，是什么原因导致的？怎么去解决速度慢的问题？

• 网络延时
• 文件体积过大:按需加载、压缩、缓存
  • 路由懒加载：把各自的路由文件分别打包，只有在解析给定路由的时候才会加载对应的路由组件。
  • 静态资源本地缓存:前端合理使用localStorage，sessionStorage等缓存方式。 采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头。
  • UI库按需加载:我们在引入elementUI或者antdesign等UI组件时，并不需要一次性完整引入，只需要将我们需要的组件引入即可。 √
  • 图片加载优化（使用可压缩图片，搭配上懒加载和预加载）
  • GZip压缩:一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。
  • 打包体积 （webpack优化，tree-sharking和按需加载插件，以及css合并）
  • 使用CDN缓存静态资源
  • 使用SSR服务端渲染
• 重复请求:通过防抖节流等，减少重复请求

路由懒加载 -减小入口文件体积 √

笔记:https://blog.csdn.net/qq_41370833/article/details/125299151?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125299151%22%2C%22source%22%3A%22qq_41370833%22%7D&ctrtid=9odkn

图片加载优化

图片压缩 -webpack:file-loader+image-webpack-loader

先使用image-webpack-loader压缩图片再使用file-loader复制输出到打包的静态资源目录

// 官方示例
rules: [{
    
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
    
      loader: 'image-webpack-loader',
      options: {
    
        bypassOnDebug: true, // [email protected]
        disable: true, // [email protected] and newer
      },
    },
  ]
}]

图片懒加载 √

笔记:https://blog.csdn.net/qq_41370833/article/details/125284975?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125284975%22%2C%22source%22%3A%22qq_41370833%22%7D&ctrtid=wL4FF

使用CDN进行静态资源缓存+webpack:externals -提高首次请求资源的响应速度/减少入口文件的大小 √

通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决这个问题，可以加载外部的CDN资源，通过 webpack的externals属性，来配置让其不被打包

案例
引入vue和element-ui

  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  //console.log(window)会发现CDN方式引入的vue、element-ui对外暴露的全局变量名为Vue、ELEMENT

配置externals

module.exports = {
    
  externals: {
    
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
  }
}

CDN学习笔记:https://editor.csdn.net/md/?articleId=125171191

静态资源本地缓存/HTTP缓存 -提高二次请求响应速度 √

笔记:https://editor.csdn.net/md/?articleId=125171191

避免组件重复打包 -webpack:CommonsChunkPlugin插件减少入口文件体积

假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复加载
CommonsChunkPlugin插件：通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。

webpack打包体积优化

tree shaking 去除没有使用的代码，减少代码体积
Tree shaking的本质是消除无用的JavaScript代码。

tree shaking的使用前提

• 使用 ES6 规范编写模块代码 ES6的模块依赖关系是确定的，和运行时状态无关
• 生产环境下

按需加载模块 code split 代码分割

1.可以将node_modules中代码单独打包成一个chunk输出
2.会自动分析多入口chunk中，有没有公共的文件，如果有会打包成单独的一个chunk不会重复打包
3.多入口页面
4.- import动态引用模块

开启GZip压缩 --减少在网络中传输的时间 √

拆完包之后，我们再用gzip做一下压缩
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。
html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

compression-webpack-plugin插件

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: config => {
    
    if (process.env.NODE_ENV === 'production') {
    
        return {
    
            plugins: [new CompressionPlugin({
    
                test: /\.js$|\.html$|\.css/,
                threshold: 10240,
                deleteOriginalAssets: false
            })]
        }
    }
}

在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件，我的服务器是用express框架搭建的 只要安装一下compression就能使用

HTTP2

todo