前言
作为一个具有越来越大规模的前端项目，优化应该是我们始终关注的焦点之一。但是，在优化之前，我们首先要了解项目现状，找出需要优化的点。对于 Next.js 项目来说，性能优化的首要目标是缩短页面加载时间，提高用户体验。本篇文章将讨论 Next.js 性能优化的两个主要方面：代码分割和缓存，分别介绍具体的实现方式和优化方法。
代码分割
代码分割是指将应用程序中的代码分配到不同的文件中以实现按需加载。这可以使应用程序更快地加载，因为只有在必要时才会加载代码。代码分割可以使用 webpack 的 SplitChunksPlugin 进行配置。然而，如果将应用程序移植到 Next.js 中，则无需主动添加 plugin，因为 Next.js 已经默认包含该功能。
哪些模块应该被拆分？
在以下情况下，应该考虑拆分模块：
- 一个较大的 JavaScript 或 CSS 文件
- npm 下载文件
- 包含大量不常用代码的库
- 网站上所有页面都不需使用的库
预加载
通过预加载，可以在用户需要使用代码之前提前加载代码，以降低加载时间。这可以通过 Next.js 提供的 dynamic 功能实现。在下面这个例子中，我们会提前加载一个名为 MyComponent 的组件。
------ ------- ---- --------------
----- ----------- - ---------- -- ------------------------------------- -
---- -----
--
------ ------- -------- ----------- -
------ -
-----
----------- -- -------------
------------ --
------
-
-请注意，ssr 属性设置为 false。这是因为 Next.js 将在服务器端进行渲染，因此我们需要将预加载延迟到客户端进行。
代码分割和本地缓存
当使用代码分割进行页面加载时，可以通过本地缓存进一步提高性能。在这种情况下，代码将存储在本地客户端中，以便在其后的页面加载中使用。这可以通过使用 next/script 模块来轻松实现。请注意，下面的代码片段只是一个快速示例，以便了解 caching 的工作原理。
------ ------ ---- -------------
------ ------- -------- ------ -
------ -
-----
----------- -- -------------
------- --------------------------------- --------------------------- --
------
-
-在以上示例中，我们添加了一个 <Script> 标签，用于指定通过代码分割加载的文件路径。strategy 属性设置为 afterInteractive，这意味着执行将在所有页面内容完成渲染后开始。这将确保资源缓存至本地客户端，以备将来使用。
缓存
本地缓存是指浏览器保存用户最近访问的网站的信息。当采用 Next.js 进行代码分割加载时，使用本地缓存非常重要，因为它将减少下一次页面被加载时的时间。使本地缓存机制正常工作需要做一些额外的工作，我们将在下面的内容中介绍。
Vary
Vary 是 HTTP 头中的一个字段，是一种缓存控制机制。它传达先前缓存响应可以与新请求的源头进行一些基本对比的方式。如果 Vary 的值发生变化，则这个响应数据就要重新获取。这种机制常常用在缓存中，以便文件被缓存的同时，还可以对不同的用户或者情境做出不同的响应。
在 Next.js 中，可以通过 response 对象在服务器端设置 Vary 键：
------ ------- -------- ------------ ---- - --------------------- ------------- -------------- ------- -
在上述模板设计中，我们以 User-Agent 为键设置了 Vary。这意味着将在缓存相同资源时考虑用户代理、设备和平台。这将鼓励缓存始终返回最适合每位用户的响应，并减少缓存可供选择的爆炸性数量。
缓存过期时间
缓存存在时间有限制，需要在设置缓存时间时采取恰当的策略。在 Next.js 中，我们可以通过以下方式设置缓存时间：
------ ------- -------- ------------ ---- - ----- --- - -- - -- -- - ---- ------------------------------ ----------------- ------------------------ -------------- ------- -
在上述示例中，我们以 ttl 变量的值（即 1 小时）为主体设定缓存控制头。该头信息发出并保存在代理缓存中，形式如下：
Cache-Control: s-maxage={ttl}, stale-while-revalidate
这意味着我们的资源将在一个小时之内保存在代理缓存中（请注意，这里的小写 “s”）。此外，当缓存为过期状态时，使用资源仍会暂时从客户端重新验证，如果缓存有效，则应该避免此过程（因为资源从客户端重新验证将消耗额外的响应数据和时间）。
结论
在本文中，我们讨论了 Next.js 中的两个关键性能优化方面：代码分割和缓存。我们介绍了不同的实现方式和调优策略，并且给出了示例代码供参考。通过掌握这些知识，可以有效地提高 Next.js 应用程序的性能并优化用户体验。我们鼓励开发者在实际项目中运用这些技术，并根据实际需求做出适当的优化设计。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719a487ad1e889fe2322746