一、什么是首屏加载
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容
首屏加载可以说是用户体验中最重要的环节
计算首屏加载的时间
通过DOMContentLoad
或者performance
来计算出首屏时间
// 方案一:
document.addEventListener('DOMContentLoaded', (event) => {
console.log('first contentful painting');
});
// 方案二:
performance.getEntriesByName("first-contentful-paint")[0].startTime
// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例,结构如下:
{
name: "first-contentful-paint",
entryType: "paint",
startTime: 507.80000002123415,
duration: 0,
};
二、加载慢的原因
在页面渲染的过程,导致加载速度慢的因素可能如下:
- 网络延时问题
- 资源文件体积是否过大
- 资源是否重复发送请求去加载了
- 加载脚本的时候,渲染内容堵塞了
三、解决方案
常见的几种SPA首屏优化方式
- 减小入口文件积
- 静态资源本地缓存
- 路由懒加载
- 异步组件加载
- UI框架按需加载
- 图片资源的压缩
- 组件重复打包
- 开启GZip压缩
- 使用SSR
开启GZip压缩
打包时使用插件后,会在打包出的资源处额外增加同一文件的 *.gz 格式。
将资源放到服务器,并且服务器配置支持 gzip 后,客户端请求资源的 Request Headers 中若有 Accept-Encoding: gzip, deflate 则会请求 gzip 文件,服务端的 Response Headers 中则会有 Content-Encoding: gzip 。
如果客户端和服务端任意一方不支持 gzip,则会请求正常的 html/css/js 文件。
安装compression-webpack-plugin
npm install compression-webpack-plugin -D
webpack.config.js
中配置
// webpack.config.js
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [
new CompressionPlugin(),
],
};
在vue.congig.js
中引入并修改webpack
配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
异步组件加载
在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。这样渲染页面的时候就不会把页面用的所有组件渲染,只有使用对应组件时才会渲染。Vue 提供了 defineAsyncComponent 方法来实现此功能:
<script setup>
import { defineAsyncComponent } from 'vue'
const AdminPage = defineAsyncComponent(() =>
import('./components/AdminPageComponent.vue')
)
</script>
<template>
<AdminPage />
</template>