如何将@next/bundle-analyzer配置整合到Next.js PWA项目的next.config.js

步骤1：安装依赖 #

先安装@next/bundle-analyzer开发依赖：

npm install @next/bundle-analyzer --save-dev
# 或使用yarn
yarn add @next/bundle-analyzer --dev

步骤2：修改next.config.js #

Next.js支持通过链式调用整合多个插件配置，你可以将@next/bundle-analyzer的配置与现有next-pwa配置合并，同时通过环境变量控制分析工具的启用状态。

假设你现有带next-pwa的配置如下：

const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    // 你的其他PWA自定义配置项
  },
  // 其他Next.js基础配置
})

整合后的完整配置：

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

// 链式调用整合两个插件
module.exports = withBundleAnalyzer(withPWA({
  pwa: {
    dest: 'public',
    // 你的其他PWA自定义配置项
  },
  // 其他Next.js基础配置
}))

步骤3：添加便捷启动脚本（可选） #

在项目的package.json中添加专门的分析构建脚本，无需每次手动输入环境变量：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "analyze": "ANALYZE=true next build"
  }
}

核心说明 #

• 运行npm run analyze（或yarn analyze）时，ANALYZE环境变量会被设为true，此时bundle-analyzer会自动启用，构建完成后会在浏览器打开包体积分析页面。
• 日常运行npm run build时，bundle-analyzer不会生效，不影响正常构建流程。
• 如果你的next.config.js原本是导出函数形式（用于更灵活的环境适配），可以调整为：

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

module.exports = (phase, { defaultConfig }) => {
  const baseConfig = withPWA({
    pwa: {
      dest: 'public',
      // 你的PWA配置
    },
    // 其他Next.js配置
  })

  return withBundleAnalyzer(baseConfig)
}

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