跳到主要内容

如何优化外部包的打包

打包外部包可以显著提高应用程序的性能。默认情况下，在服务器组件和路由处理程序内导入的包会自动被 Next.js 打包。本页将指导您如何分析和进一步优化包打包。 默认情况下，导入到应用程序中的包不会被打包。如果外部包没有预打包，例如从单体仓库或 node_modules 导入，这可能会影响性能或可能无法工作。本页将指导您如何分析和配置包打包。

分析 JavaScript 包​

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

安装​

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

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

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

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
# 或
ANALYZE=true yarn build
# 或
ANALYZE=true pnpm build

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

优化包导入​

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

您可以通过在 next.config.js 中添加 optimizePackageImports 选项来优化这些包的导入方式。此选项将只加载您实际使用的模块，同时仍然让您方便地编写具有许多命名导出的导入语句。

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

module.exports = nextConfig

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

打包特定包​

要打包特定包，您可以在 next.config.js 中使用 transpilePackages 选项。此选项对于打包未预打包的外部包很有用，例如在单体仓库中或从 node_modules 导入的包。

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

module.exports = nextConfig

打包所有包​

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

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  bundlePagesRouterDependencies: true,
}

module.exports = nextConfig

选择特定包退出打包​

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

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 在 Pages 路由中自动打包外部包：
  bundlePagesRouterDependencies: true,
  // 为 App 和 Pages 路由选择特定包退出打包：
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

选择特定包退出打包​

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

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

module.exports = nextConfig

Next.js 包含一个流行包的列表，这些包目前正在努力实现兼容性并自动退出。查看完整列表。

最后于 更新