使用 Next.js 时默认提高性能

Next.js 负责处理 React 应用中的许多优化工作，因此您无需

Houssein Djirdeh

Next.js 是一个固有的 React 框架，内置了多种性能优化措施。该框架背后的主要理念是通过默认包含这些功能来确保应用启动并保持尽可能高的性能。

本课将简要介绍该框架提供的许多功能。此集合中的其他指南将更详细地介绍这些功能。

注意 ：Chrome 正与 Next.js 携手合作，为希望打造快速、服务器渲染的 React 应用的开发者改进此框架。最近新增了许多优化功能，例如 module/nomodule 支持和改进的精细分块策略。

您将学到什么？

虽然 Next.js 默认提供了许多性能优化方案，但这些指南旨在更详细地介绍这些优化方案，并向您展示如何使用它们来打造快速高效的体验。

注意 ：本集合假定您具备 React 的基础知识。如果没有，请参阅 React 的使用入门页面。

总体而言，许多优化措施可以添加到 React 网站，同样适用于使用 Next.js 构建的应用。由于本单元重点介绍 Next.js 具体提供什么功能，因此本文不作详述。如需详细了解常规 React 优化，请查看我们的 React 集合。

Next.js 与 React 有何不同？

React 是一个库，可让您使用基于组件的方法更轻松地构建界面。虽然 React 功能强大，但具体来说是一个界面库。许多开发者会添加额外的工具，例如模块打包器（例如 webpack）和转译器（例如 Babel）来获得完整的构建工具链。

在 React 收集中，我们采用创建 React 应用 (CRA) 的方法快速启动 React 应用。CRA 只需一个命令就能提供完整的构建工具链，从而消除设置 React 应用的麻烦。

虽然 CRA 中内置了一些默认优化，但该工具旨在提供简单直接的设置。开发者可以选择是否移除和修改配置本身。

Next.js 也可用于创建新的 React 应用，但采用了另一种方法。它会立即提供许多开发者希望进行但难以设置的常见优化，例如：

• 服务器端渲染
• 自动代码拆分
• 路由预提取
• 文件系统路由
• CSS-in-JS 样式 (styled-jsx)

设置

如需创建新的 Next.js 应用，请运行以下命令：

npx create-next-app new-app

注意 ：npx 是一个软件包运行程序，使用 npm 5.2.0 或更高版本自动安装。它简化了管理软件包涉及的很多过程，包括运行 CLI 命令（如 create-next-app），而无需在机器上全局安装这些软件包。

然后导航到该目录并启动开发服务器：

cd new-app
npm run dev

注意 ：您还可以将 Next.js 添加到现有的 React 应用中。如需了解具体方法，请参阅手动设置。

以下嵌入展示了新 Next.js 应用的目录结构。

• 点击 Remix to Edit 使项目可修改。
• 如需预览网站，请按查看应用，然后按全屏 。

请注意，pages/ 目录是使用单个文件创建的：index.jsx。Next.js 遵循文件系统路由方法，其中此目录中的每个网页都作为单独的路由提供。在此目录中创建新文件（例如 about.js）后，系统会自动创建一个新路由 (/about)。

组件还可以像其他 React 应用一样创建和使用。系统已使用单个组件 nav.js 创建了 components/ 目录，该组件已在 index.js 中导入。默认情况下，Next.js 中使用的每个导入都仅在加载相应页面时提取，因而具有自动代码拆分的优势。

此外，Next.js 中的每个初始网页加载都是服务器端呈现的。如果您在开发者工具中打开“Network”面板，会发现文档的初始请求返回一个完全由服务器渲染的页面。

“Network”面板的“预览”标签页显示，当收到页面请求时，Next.js 会返回视觉上完整的 HTML。

注意 ：请参阅服务器渲染，了解服务器端渲染通常如何为用户提供更好的体验。

以上只是 Next.js 自动提供的众多功能中的一小部分。其中许多过滤器都可自定义，并可根据不同用例进行修改。

后续操作

双关语意图 😛?

本集合的所有其他指南都将详细介绍特定的 Next.js 功能：

• 路由预提取以加快网页导航速度
• 提供混合网页和仅包含 AMP 网页，以便更快地从搜索引擎加载
• 使用动态导入功能拆分代码组件，以减少 JavaScript 占用的空间