优化打包
打包外部包可以显著提高应用程序的性能。 默认情况下，导入到应用程序中的包不会被打包。这可能会影响性能，或者如果外部包没有预先打包，例如从单仓或node_modules导入时，可能无法正常工作。此页面将指导您如何分析和配置包打包。
分析 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 = nextConfigNext.js 也自动优化了一些库，因此它们不需要包含在 optimizePackageImports 列表中。请参阅完整列表。
捆绑特定包
要捆绑特定包，您可以在 next.config.js 文件中使用 transpilePackages 选项。此选项对于捆绑未预捆绑的外部包很有用，例如，在单仓存储库中或从 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这是否有帮助？