next.js捆绑包分析器不会创建页面来审查捆绑包

Question

我正在尝试通过使用https://www.npmjs.com/package/@next/bundle-analyzer来减少站点的捆绑包大小

目前，当我用npm analyze运行

"analyze": "cross-env ANALYZE=true next build",

它没有输出所需的可视化的html文件。

这是我的next.config.js

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')


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

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
  poweredByHeader: false,
},
withBundleAnalyzer(),

)

使用此nextjs-analyze-app-bundle tutorial。

哪里出了问题？

Answer 1

看起来这个问题已经被回答了on Vercel's issues board。将他们的解决方案复制到此处：

这些插件是增强configuration对象的函数，因此您必须包装它们，而不是将它们作为参数提供：

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')


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

module.exports = withBundleAnalyzer(withPWA({
    pwa: {
        dest: 'public',
        runtimeCaching,
    },
    poweredByHeader: false,
}));

Answer 2

在我这样做之前，

module.exports = withBundleAnalyzer(
  withPWA({
    pwa: {
      dest: 'public',
      runtimeCaching,
    },
    poweredByHeader: false,
  })
)

module.exports = 
  {
    env: {
      BASE_URL: process.env.BASE_URL,
    },
    future: {
      webpack5: true,
    },
    reactStrictMode: true,
  }

不确定，但我认为您应该只需要一个module.exports，所以我在withBundleAnalyzer中包装了其他东西，如下所示

module.exports = withBundleAnalyzer(
  withPWA({
    pwa: {
      dest: 'public',
      runtimeCaching,
    },
    poweredByHeader: false,
  }),
  {
    env: {
      BASE_URL: process.env.BASE_URL,
    },
    future: {
      webpack5: true,
    },
    reactStrictMode: true,
  }
)