首页的性能指标

• 首屏绘制（First Paint，FP）
• 首屏内容绘制（First Contentful Paint，FCP）
• 可交互时间（Time to Interactive，TTI）
• 最大内容绘制（Largest Contentful Paint，LCP)
• 首次有效绘制（First Meaning Paint, FMP）

FP: 时间线上的第一个“时间点”，是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间，简而言之就是浏览器第一次发生变化的时间 FCP: 是指浏览器从响应用户输入网络地址，在页面首次绘制文本，图片（包括背景图）、非白色的 canvas 或者SVG 才算做 FCP，有些文章说 FCP 是首屏渲染事件，这其实是不对的。 TTI，翻译为“可交互时间”表示网页第一次完全达到可交互状态的时间点。可交互状态指的是页面上的 UI 组件是可以交互的（可以响应按钮的点击或在文本框输入文字等），不仅如此，此时主线程已经达到“流畅”的程度，主线程的任务均不超过50毫秒。在一般的管理系统中，TTI 是一个很重要的指标。 FMP（全称“First Meaningful Paint”，翻译为“首次有效绘制”表示页面的“主要内容”开始出现在屏幕上的时间点，它以前是我们测量用户加载体验的主要指标。本质上是通过一个算法来猜测某个时间点可能是 FMP，但是最好的情况也只有77%的准确率，在lighthouse6.0 的时候废弃掉了这个指标，取而代之的是 LCP 这个指标。 LCP（全称“Largest Contentful Paint”）表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。

performance 对象是专门用来用于性能监控的对象，内置了一些前端需要的性能参数。

preload 和 prefetch 的作用和区别

• preload

是一种在页面加载过程中提前加载关键资源的方法通过在页面头部以 的方式引入资源告诉浏览器哪些资源是页面加载过程中需要优先加载的适用于当前页面需要的资源，可以帮助加快关键资源的加载速度，提高首屏渲染性能。

• prefetch

是一种在浏览器空闲时提前加载未来可能需要的资源的方法通过在页面头部以 的方式引入资源告诉浏览器哪些资源是未来页面可能会使用到的可以在浏览器空闲时提前加载这些资源，以减少未来页面加载时的延迟适用于未来可能会被访问到的资源，可以在一定程度上提高用户的后续页面加载速度。

优化首页加载速度对于提升用户体验至关重要。以下是一些基于 Webpack 的首页加载优化方案：

1. 代码分割 (Code Splitting)

• 分离公共代码: 使用 Webpack 的 SplitChunksPlugin 将应用中使用的公共库（如 React、Vue、Lodash 等）打包到单独的文件中，以便浏览器可以缓存它们，从而加快后续页面加载速度。
• 动态导入: 利用 Webpack 的动态导入功能（import()）实现按需加载，只在用户访问特定页面或功能时加载相关代码。

2. Tree Shaking

• 删除无用代码: Webpack 支持 Tree Shaking，通过分析模块的依赖关系，移除未使用的代码，减少最终打包文件的大小。
• 优化模块引用: 确保只引入实际需要的模块或方法，避免整个库的引入（如只引入 Lodash 的某个方法，而不是整个 Lodash 库）。

3. 压缩和优化资源

• JavaScript 压缩: 使用 TerserPlugin 来压缩和混淆 JavaScript 文件，减少文件体积。
• CSS 压缩: 使用 css-minimizer-webpack-plugin 来压缩 CSS 文件，移除冗余的样式和注释。
• 图片优化: 利用 image-webpack-loader 等插件对图片进行压缩和格式转换（如转换为 WebP），减少图片文件的大小。

4. 懒加载 (Lazy Loading)

• 图片懒加载: 对于页面中的图片，使用懒加载策略，只有当图片进入视口时才加载。
• 组件懒加载: 对不在首屏展示的组件使用懒加载，延迟加载这些组件的代码。

5. 预加载和预获取 (Preloading and Prefetching)

• 预加载: 使用 Webpack 的 PreloadWebpackPlugin 插件，将首屏渲染所需的关键资源（如 CSS 和 JavaScript）设置为预加载，确保这些资源尽早加载。
• 预获取: 利用 PrefetchWebpackPlugin 插件，为后续页面的资源提前获取，以减少用户切换页面时的等待时间。

6. 缓存 (Caching)

• 文件指纹: 使用 Webpack 的 [contenthash] 来为输出的文件生成唯一的文件名指纹，确保文件内容发生变化时，客户端可以重新下载最新版本，而没有变化的文件可以直接从缓存中获取。
• 持久缓存: 结合 Cache-Control 头部，配置适当的缓存策略，允许浏览器缓存静态资源以减少后续页面的加载时间。

7. HTTP/2 和并行加载

• 启用 HTTP/2: HTTP/2 支持多路复用，可以显著加快资源的并行加载速度。确保服务器和浏览器都支持 HTTP/2 协议，并配置 Webpack 生成适用于 HTTP/2 的资源包。
• 文件合并: 虽然 HTTP/2 可以加速并行加载，但对于小文件的合并仍然是有意义的，以减少 HTTP 请求的数量。

8. 减少初始加载资源

• 删除不必要的 polyfills: 根据目标浏览器的特性，删除不必要的 polyfills，减少打包文件的大小。
• 延迟加载第三方脚本: 对于非关键的第三方脚本（如分析工具、广告脚本等），设置延迟加载，确保它们不会阻塞首屏渲染。

9. 分析和监控

• Webpack Bundle Analyzer: 使用 webpack-bundle-analyzer 插件分析打包文件的大小和组成，识别和优化大的依赖项。
• 监控首屏时间: 结合性能监控工具（如 Lighthouse、Google PageSpeed Insights），持续监控和优化首屏加载时间。

通过这些优化措施，你可以显著减少首页的加载时间，提升用户体验和 SEO 排名。