Next.js 是一个基于 React 的轻量级框架，能够提供 SSR、CSR 以及 SSG 的完美结合，以及自动化代码分割、按需预加载等特性，在前端开发中得到了广泛的应用。然而，随着应用规模的扩大，性能问题也愈加突出。本文将介绍 Next.js 应用性能诊断与调优的实践和指导。
性能指标
首先，需要了解哪些指标决定了一个 Next.js 应用的性能。主要包括：页面加载时间、首屏渲染时间、重绘时间、交互响应时间等。
- 页面加载时间（Page Load Time）：指从发起请求开始到页面完全加载且所有资源都下载完成的时间。页面加载时间越短，用户等待时间越少，用户体验越好。
- 首屏渲染时间（First Contentful Paint）：指页面在浏览器中渲染出第一个图像、文字或者其他类型的内容的时间。首屏渲染时间越短，用户感知到的页面加载时间越短。
- 重绘时间（Repaint Time）：指页面完成首次渲染后到用户滚动屏幕或者进行其它交互行为所需的时间。重绘时间越短，用户感知到的页面加载时间越短。
- 交互响应时间（Interaction Time）：指用户在页面上进行一个交互行为（比如点击、滚动等）到页面反馈这个行为（比如弹出菜单、页面滚动等）的时间。交互响应时间越短，用户感知到的页面加载时间越短。
了解这些指标不仅能够帮助我们更好地评估一个应用的性能，也能够指导我们进行性能优化。
性能诊断
有了性能指标作为衡量标准，我们能够通过工具来诊断 Next.js 应用的性能问题。
Lighthouse
Lighthouse 是 Google 开发的一个自动化测试工具，能够在多个平台上运行，包括 Chrome、Firefox、Edge 等。它可以对我们应用的性能进行全方位评测，评分结果和评分因素能够有效指导我们的性能调优。
运行 Lighthouse 做测试非常简单，只需在 Chrome 开发者工具中切换到 Audits 标签页，点击“Run audits”按钮即可。测试结果会显示在页面下方。
Web Vitals
Web Vitals 是 Google 对 Web 应用核心指标的定义，包括 Largest Contentful Paint、First Input Delay 和 Cumulative Layout Shift。这些指标能够帮助我们理解用户体验，以及应用在加载、交互过程中的表现。我们可以使用 Web Vitals 插件或者代码库进行监控。
------ - ------- ------- ------ - ---- ------------- -- -- ------- ---------- ----- --------------- -- - -------------------- --- -- -- ----- ----- ----- --------------- -- - -------------------- --- -- -- ---------- ------ ----- --------------- -- - -------------------- ---
性能优化
性能评估之后，需要对应用进行性能优化。以下是一些优化建议。
服务器端开启 gzip 压缩
服务器端开启 gzip 压缩能够帮助减少小文件的传输量，从而加快页面加载速度。
-- ------- ------- ------
----- - ------------ - - ----------------
----- - ----- - - ---------------
----- ---- - ----------------
----- ----------- - -----------------------
----- --- - -------------------- --- -------------
----- --- - ------ --- ---
----- ------ - ------------------------
--------------------- -- -
------------------ ---- -- -
----- --------- - -------------- ------
----------- ---- ---------------------- -- -
--------------- --- ---
---
--
------------------- -- -- ---- --
------------- -- -- -
-------------- ----- -- ------------------------
---
---启用静态资源优化
启用静态资源优化可以通过自动化代码分割、按需加载等方式，让应用的静态资源更高效地加载。
自动化分割代码
自动化分割代码能够减少不必要的代码加载，提高页面载入速度，同时也有利于提高编程效率。
- 在页面级别分割代码：
------ ------- ---- ---------------
----- ---------------- - ---------- -- ------------------------------------------
-------- ------ -
------ -
-----
----------------- --
------
--
-
------ ------- ------ 在组件级别分割代码：
------ ------- ---- ---------------
----- ---------------- - --------
-- -- -----------------------------------------
- ---- ----- -
--
-------- ------ -
------ -
-----
----------------- --
------
--
-
------ ------- -----按需加载或预加载
除了自动化分割代码外，我们还可以通过按需加载或预加载的方式来增加页面加载的效率。
- 预加载：
------ ---- ---- ------------
-------- ------ -
------ -
-----
----- --------------- ---------
---------- --------
-------
------
--
-
------ ------- ------ 按需加载：
------ - ---------- -------- - ---- --------
-------- --------------- -
------ --------- ----------------
-
-------- ------------- -
----- ---------- ------------ - ----------------
------------ -- -
--------------------------------------------------- -- -------------------
-- ----
------ -------- - -------------- -- - -----
-
------ ------- ------------图片优化
图片是 Web 应用中最占用带宽的一种资源，因此对图片的优化至关重要。这里介绍两种优化方式：图片格式转换和图片懒加载。
图片格式转换
使用 WebP 格式而不是 JPEG 或 PNG 格式能够显著减少图片的大小，从而加快页面加载速度。但是需要注意的是，不支持 WebP 格式的浏览器需要回退到其他格式。
--------- ------- -------------------------------- ------------------ ------- ------------------------------- ------------------ ---- --------------------------- ------------ ----------
图片懒加载
图片懒加载是一种延迟加载的技术，即在页面滚动到图片位置时才开始加载。这种方式能够避免在页面载入时加载过多的图片，从而加快页面加载速度。
------ - ---------- ------ - ---- --------
-------- ----------- ---- --- -- -
----- --- - ---------
------------ -- -
----- -------- - --- ------------------------------ -- -
----------------------- -- -
-- ---------------------- -
--------------- - ----
--------------------------------
-
---
---
------------------------------
------ -- -- -
--------------------------------
--
-- ----
------ ---- --------- --------- ---
-
------ ------- ----------结论
本文介绍了 Next.js 应用性能的评估和优化，希望对读者了解 Next.js 应用性能优化有所帮助。虽然本文提供了很多优化的思路和代码示例，但它们并不是处处生效的银弹。具体还是需要根据应用的实际情况灵活调整。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6735dbbf0bc820c58250dd7e