捆绑外部软件包可以显著提高应用程序的性能。
Server Components 和 Route Handlers 中导入的软件包会自动由 Next.js 捆绑。本页面将指导您如何分析并进一步优化软件包捆绑。monorepo 或 node_modules 导入，这可能会影响性能或导致其无法工作。本页面将指导您如何分析和配置软件包捆绑。@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 文件来优化这些软件包的导入方式。此选项将只加载您_实际_使用的模块，同时仍然为您提供编写带有许多命名导出的 import 语句的便利性。
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizePackageImports: ['icon-library'],
},
}
module.exports = nextConfigNext.js 还会自动优化一些库，因此它们不需要包含在 optimizePackageImports 列表中。请参阅 完整列表。
要捆绑特定的软件包，您可以使用 next.config.js 中的 transpilePackages 选项。此选项对于捆绑未预先捆绑的外部软件包非常有用，例如，在 monorepo 或从 node_modules 导入的软件包。
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['package-name'],
}
module.exports = nextConfig要自动捆绑所有软件包（在 App Router 中的默认行为），您可以使用 next.config.js 中的 bundlePagesRouterDependencies 选项。
/** @type {import('next').NextConfig} */
const nextConfig = {
bundlePagesRouterDependencies: true,
}
module.exports = nextConfig如果您已启用 bundlePagesRouterDependencies 选项，您可以使用 next.config.js 中的 serverExternalPackages 选项，将特定软件包排除在自动捆绑之外：
/** @type {import('next').NextConfig} */
const nextConfig = {
// Automatically bundle external packages in the Pages Router:
bundlePagesRouterDependencies: true,
// Opt specific packages out of bundling for both App and Pages Router:
serverExternalPackages: ['package-name'],
}
module.exports = nextConfig由于在 Server Components 和 Route Handlers 中导入的软件包会自动由 Next.js 捆绑，您可以使用 next.config.js 中的 serverExternalPackages 选项，将特定软件包排除在捆绑之外。
/** @type {import('next').NextConfig} */
const nextConfig = {
serverExternalPackages: ['package-name'],
}
module.exports = nextConfigNext.js 包含一份流行软件包列表，这些软件包目前正在进行兼容性适配并已自动排除捆绑。请参阅 完整列表。