分析 Next.js 应用的打包体积（Bundle Size）是性能优化的关键步骤。最常用且官方推荐的工具是 。 以下是完整的步骤指南，从安装配置到如何分析及优化。 --- 第一步：安装工具 首先，你需要安装 插件。为了跨平台（Windows/Mac/Linux）设置环境变量，建议同时安装 。 第二步：配置 修改你的 文件，使用 包裹现有的配置。 注意： 如果你已经使用了其他插件（如 等），可以进行链式调用或嵌套包裹。 第三步：添加分析脚本 在 的 中添加一个新的命令，专门用于分析构建： 第四步：运行分析 在终端运行以下命令： 运行结束后，Next.js 会执行构建过程，并自动在浏览器中打开两个网页： 1. : 客户端 bundle 分析图（这是你最需要关注的，因为它影响用户下载速度）。 2. : 服务端 bundle 分析图（影响服务器启动速度和无服务器函数的冷启动时间）。 第五步：如何解读分析图 打开的页面是一个交互式的 Treemap（树图）： 方块大小：代表文件的大小。方块越大，占用的体积越大。 颜色：通常用于区分不同的 chunk。 层级：你可以点击方块放大查看内部的具...
播面