[英]next.js bundle analyzer isn't creating pages to vew bundles
I'm trying to reduce the bundle size of my site by using https://www.npmjs.com/package/@next/bundle-analyzer我正在尝试使用https://www.npmjs.com/package/@next/bundle-analyzer来减小我网站的包大小
At the moment, when I run npm analyze
with目前,当我运行npm analyze
时
"analyze": "cross-env ANALYZE=true next build",
It isn't outputting the html files with the visualization needed.它不输出具有所需可视化效果的 html 文件。
This is my next.config.js
这是我的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(),
)
using this nextjs-analyze-app-bundle tutorial .使用这个nextjs-analyze-app-bundle 教程。
What is going wrong?出了什么问题?
Looks like this has been answered on Vercel's issues board .看起来这已经在 Vercel 的问题板上得到了回答。 Copying their solution here:在此处复制他们的解决方案:
These plugins are functions that enhance the configuration object, so you have to wrap them instead of providing them as arguments:这些插件是增强配置对象的函数,因此您必须包装它们而不是将它们作为参数提供:
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,
}));
Before I was doing it like this,在我这样做之前,
module.exports = withBundleAnalyzer(
withPWA({
pwa: {
dest: 'public',
runtimeCaching,
},
poweredByHeader: false,
})
)
module.exports =
{
env: {
BASE_URL: process.env.BASE_URL,
},
future: {
webpack5: true,
},
reactStrictMode: true,
}
Not sure but I think you should only need to have one module.exports
so I wrapped my other stuff inside the withBundleAnalyzer
like this不确定,但我认为你应该只需要一个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,
}
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.