next.js 包分析器输出 3 页答案

【问题标题】：next.js bundle analyzer outputs 3 pagesnext.js 包分析器输出 3 页
【发布时间】：2023-01-18 01:23:38
【问题描述】：

我已经在 NextJs 中开始了我的第一个项目，我正在使用 next 和 @next/bundle-analyzer - 两个版本都是 12.3.1。

当我在命令行 ANALYZE=true next build 中运行时，我收到以下输出：

info  - Skipping linting
info  - Checking validity of types
Webpack Bundle Analyzer saved report to /(...)/.next/server/analyze/server.html

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to /(...)/.next/analyze/server.html
Webpack Bundle Analyzer saved report to /(...)/.next/analyze/client.html

并且在浏览器中打开了 3 个新选项卡。

.next/server/analyze/server.html - 包含服务器端模块。都好。

.next/analyze/server.html - 是一个空白页面，只有左侧边栏。

.next/analyze/client.html - 包含客户端模块。都好。

但是，根据@next/bundle-analyzer文档：

两个 HTML 文件（client.html 和 server.html）将输出到 /analyze/。

目前尚不清楚我是否做错了什么，或者 @next/bundle-analyzer 生成 3 个文件作为输出是正常的。

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

/** @type {import('next').NextConfig} */
module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  experimental: {
    newNextLinkBehavior: true
  },
  eslint: {
    ...
  },
  images: {
    minimumCacheTTL: 300
  }
}
谢谢你。

【问题讨论】：

我也有同样的行为。

标签： webpack next.js webpack-bundle-analyzer

【解决方案1】：

这是正常的，因为next 构建器使用 3 种不同的配置启动 webpack 3 次，并获得 3 个不同的包集，并且你的 @next/bundle-analyzer 插件适用于每个包；

如果你不想要这种行为（例如你只需要client报告就可以了），自定义它的唯一方法是放弃使用@next/bundle-analyzer，而是在next.config.js中自定义webpack的配置只生成一个报告，沿着这些线：

    if (config.name === 'client' && process.env.ANALYZE) {
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          openAnalyzer: true,
          reportFilename: `./analyze/client.html`,
        }),
      );
    }

注意config.name === 'client'部分。另外，不要忘记放弃原来的@next/bundle-analyzer插件

【讨论】：