next.js束分析器输出3页

Question

我已经在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
}
}

谢谢。

Answer 1

1. 这很正常，因为next构建器使用3种不同的配置启动了3次webpack，并获得了3个不同的捆绑包集，并且您的@next/bundle-analyzer插件应用于其中的每一个
2. 如果您不想要这种行为(例如，您只需要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插件