优化包捆绑

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

分析 JavaScript 包

@next/bundle-analyzer 是 Next.js 的一个插件，可帮助您管理应用程序包的大小。它会生成每个包及其依赖项大小的可视化报告。您可以使用这些信息来删除大型依赖项、拆分或延迟加载您的代码。

安装

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

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

然后，将包分析仪的设置添加到您的 next.config.js 中。

/** @type {import('next').NextConfig} */
const nextConfig = {}
 
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
 
module.exports = withBundleAnalyzer(nextConfig)

生成报告

运行以下命令来分析您的包

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

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

优化包导入

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

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

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

Next.js 还会自动优化某些库，因此无需将其包含在 optimizePackageImports 列表中。请参阅完整列表。

选择特定包不进行捆绑

由于在服务器组件和路由处理程序中导入的包会由 Next.js 自动捆绑，因此您可以使用 next.config.js 中的 serverExternalPackages 选项选择特定包不进行捆绑。

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

Next.js 包含一个热门包列表，这些包目前正在进行兼容性测试并自动选择退出。请参阅完整列表。