优化package打包

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

分析 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

报告将在您的浏览器中打开三个新标签，您可以进行检查。定期评估您的应用程序包可以帮助您随着时间的推移保持应用程序性能。

优化包导入

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

You can optimize how these packages are imported by adding the optimizePackageImports option to your while still giving you the convenience of writing import statements with many named exports. 您可以通过在next.config.js中添加optimizePackageImports选项来优化这些包的导入方式。此选项将仅加载您实际使用的模块，同时仍然使用多个命名的导出为您提供编写导入语句的便利。

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

module.exports = nextConfig;

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

将特定的包排除打包

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

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

module.exports = nextConfig;

js 包含了一个流行的包列表，这些软件包目前正在进行兼容性方面的工作，并且会自动退出打包。参阅完整列表。