Skip to main content

优化包打包

打包外部包可以显著提高应用的性能。默认情况下，Next.js 会自动打包在服务器组件和路由处理程序中导入的包。本页将指导你如何分析和进一步优化包打包。

¥Bundling external packages can significantly improve the performance of your application. By default, packages imported inside Server Components and Route Handlers are automatically bundled by Next.js. This page will guide you through how to analyze and further optimize 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.

/** @type {import('next').NextConfig} */
const nextConfig = {}

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(nextConfig)

生成报告​

¥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.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['icon-library'],
  },
}

module.exports = nextConfig

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.

选择特定包不进行打包​

¥Opting specific packages out of bundling

由于 Next.js 自动打包了服务器组件和路由处理程序中导入的包，因此你可以使用 next.config.js 中的 serverExternalPackages 选项选择退出打包的特定包。

¥Since packages imported inside Server Components and Route Handlers are automatically bundled by Next.js, you can opt specific packages out of bundling using the serverExternalPackages option in your next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

Next.js 包含一个流行软件包列表，这些软件包目前正在进行兼容性工作并自动选择退出。参见 完整列表。

¥Next.js includes a list of popular packages that currently are working on compatibility and automatically opt-ed out. See the full list.