软件包打包

¥Package Bundling

打包外部包可以显著提高应用的性能。默认情况下，导入到应用中的包不会被打包。如果外部包未预先打包（例如，从 monorepo 或 node_modules 导入），这可能会影响性能或无法正常工作。本页面将指导你如何分析和配置包打包。

¥Bundling external packages can significantly improve the performance of your application. By default, packages imported into your application are not bundled. This can impact performance or might not work if external packages are not pre-bundled, for example, if imported from a monorepo or node_modules. This page will guide you through how to analyze and configure package bundling.

分析 JavaScript 包

¥Analyzing JavaScript bundles

@next/bundle-analyzer 是 Next.js 的一个插件，可帮助你管理应用包的大小。它会生成每个包及其依赖的大小的可视化报告。你可以使用该信息来删除大型依赖、拆分或 lazy-load 你的代码。

¥@next/bundle-analyzer is a plugin for Next.js that helps you manage the size of your application bundles. It generates a visual report of the size of each package and their dependencies. You can use the information to remove large dependencies, split, or lazy-load your code.

安装

¥Installation

通过运行以下命令安装插件：

¥Install the plugin by running the following command:

npm i @next/bundle-analyzer
# or
yarn add @next/bundle-analyzer
# or
pnpm add @next/bundle-analyzer

然后，将打包分析器的设置添加到你的 next.config.js。

¥Then, add the bundle analyzer's settings to your next.config.js.

生成报告

¥Generating a report

运行以下命令来分析你的包：

¥Run the following command to analyze your bundles:

ANALYZE=true npm run build
# or
ANALYZE=true yarn build
# or
ANALYZE=true pnpm build

该报告将在你的浏览器中打开三个新选项卡，你可以检查这些选项卡。定期评估应用的打包包可以帮助你随着时间的推移保持应用性能。

¥The report will open three new tabs in your browser, which you can inspect. Periodically evaluating your application's bundles can help you maintain application performance over time.

优化包导入

¥Optimizing package imports

某些包（例如图标库）可以导出数百个模块，这可能会导致开发和生产中的性能问题。

¥Some packages, such as icon libraries, can export hundreds of modules, which can cause performance issues in development and production.

你可以通过将 optimizePackageImports 选项添加到 next.config.js 来优化这些包的导入方式。此选项将仅加载你实际使用的模块，同时仍为你提供编写具有许多命名导出的导入语句的便利。

¥You can optimize how these packages are imported by adding the optimizePackageImports option to your next.config.js. This option will only load the modules you actually use, while still giving you the convenience of writing import statements with many named exports.

Next.js 还会自动优化一些库，因此它们不需要包含在 optimizePackageImports 列表中。查看 完整列表。

¥Next.js also optimizes some libraries automatically, thus they do not need to be included in the optimizePackageImports list. See the full list.

打包特定包

¥Bundling specific packages

要打包特定包，你可以在 next.config.js 中使用 transpilePackages 选项。此选项对于打包未预先打包的外部包（例如，在 monorepo 中或从 node_modules 导入的包）非常有用。

¥To bundle specific packages, you can use the transpilePackages option in your next.config.js. This option is useful for bundling external packages that are not pre-bundled, for example, in a monorepo or imported from node_modules.

打包所有包

¥Bundling all packages

要自动打包所有包（应用路由中的默认行为），你可以在 next.config.js 中使用 bundlePagesRouterDependencies 选项。

¥To automatically bundle all packages (default behavior in the App Router), you can use the bundlePagesRouterDependencies option in your next.config.js.

选择特定包不进行打包

¥Opting specific packages out of bundling

如果你启用了 bundlePagesRouterDependencies 选项，则可以使用 next.config.js 中的 serverExternalPackages 选项，选择将特定软件包退出自动打包：

¥If you have the bundlePagesRouterDependencies option enabled, you can opt specific packages out of automatic bundling using the serverExternalPackages option in your next.config.js: