Next.js 如何使用 source-map-explorer 分析构建产物

前置准备 #

首先需要确保项目已安装source-map-explorer依赖，未安装可执行以下命令：

npm i source-map-explorer --save-dev

然后需要在项目根目录的next.config.js中开启生产环境的source map生成，否则无法完成分析：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 开启生产环境浏览器端source map
  productionBrowserSourceMaps: true,
  // 其余原有配置保持不变
}

module.exports = nextConfig

配置package.json脚本 #

参考你在CRA项目中的使用方式，直接修改构建产物路径为Next.js客户端JS资源的对应目录即可，配置如下：

"build:analyze": "npm run build && source-map-explorer '.next/static/chunks/**/*.js'"

注：Windows环境下如果使用cmd执行命令报错，可以去掉路径两侧的单引号。

如果需要同时分析服务端的构建产物，可以新增单独的分析脚本：

"build:analyze:server": "npm run build && source-map-explorer '.next/server/chunks/**/*.js'"

执行分析 #

和CRA项目用法完全一致，直接执行以下命令即可：

npm run build:analyze

命令执行完成后会自动打开浏览器，展示完整的包体积占比分析结果。

可选优化 #

如果只想分析单个页面的包体积，可以直接指定对应页面的JS路径，缩小分析范围，比如只分析首页：

"build:analyze:index": "npm run build && source-map-explorer '.next/static/chunks/pages/index-*.js'"

内容的提问来源于stack exchange，提问作者user14787887