打包分析器

@next/bundle-analyzer 是 Next.js 的一个插件，帮助你管理 JavaScript 模块的大小。它生成每个模块及其依赖项大小的可视化报告。你可以利用这些信息来移除大型依赖项，分割你的代码，或者仅在需要时加载某些部分，从而减少传输到客户端的数据量。

安装

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

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

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

/** @type {import('next').NextConfig} */
const nextConfig = {}

const withBundleAnalyzer = require('@next/bundle-analyzer')()

module.exports =
  process.env.ANALYZE === 'true' ? withBundleAnalyzer(nextConfig) : nextConfig

分析你的打包

运行以下命令来分析你的打包：

ANALYZE=true npm run build
# 或
ANALYZE=true yarn build
# 或
ANALYZE=true pnpm build

报告将在你的浏览器中打开三个新标签页，你可以进行检查。在开发过程中定期这样做，并在部署你的网站之前进行，可以帮助你尽早识别大型打包，并设计你的应用程序以提高性能。