Menu

优化包的打包

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

分析 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.js 会自动打包服务器组件和路由处理程序中导入的包，你可以使用 next.config.js 中的 serverExternalPackages 选项将特定包排除在打包之外。

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

Next.js 包含了一个流行包的列表，这些包目前正在进行兼容性工作，并自动被排除在打包之外。查看 完整列表。

了解更多关于为生产环境优化应用程序的信息。