ntab.dev —提升效率的新标签页组件优化打包
打包外部包可以显著提高应用程序的性能。 默认情况下，导入到应用程序中的包不会被打包。如果外部包没有预先打包（例如，从单体仓库或 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报告将在你的浏览器中打开三个新标签页，你可以进行检查。定期评估应用程序的打包可以帮助你随着时间的推移保持应用程序性能。
优化包导入
一些包，如图标库，可能会导出数百个模块，这可能会在开发和生产环境中导致性能问题。
你可以通过在 next.config.js 中添加 optimizePackageImports 选项来优化这些包的导入方式。这个选项只会加载你实际使用的模块，同时仍然让你能够方便地编写带有多个命名导出的导入语句。
/** @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 = {
// 在 Pages Router 中自动打包外部包：
bundlePagesRouterDependencies: true,
// 将特定包排除在 App 和 Pages Router 的打包之外：
serverExternalPackages: ['package-name'],
}
module.exports = nextConfig