打包分析工具

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

安装

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

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

然后将打包分析工具的配置添加到你的 next.config.js 文件中：

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

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

module.exports = withBundleAnalyzer(nextConfig)

分析打包文件

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

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

该报告将在浏览器中打开三个新标签页供你查看。在开发过程中定期执行此操作，并在部署站点前进行分析，可以帮助你及早发现大型打包文件，从而设计出性能更优的应用程序架构。

安装

分析打包文件

On this page