Блог

Я пытаюсь уменьшить размер пакета моего сайта, используя 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.

Что происходит не так?

Похоже, на этот вопрос был дан ответ на доске вопросов Vercel. Копирование их решения здесь:

Эти плагины представляют собой функции, которые улучшают объект конфигурации, поэтому вам нужно обернуть их вместо предоставления в качестве аргументов:

 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,
}));
  

Раньше я делал это так,

 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,
  }
)