When you deploy a service,
you should try to reduce the package size. You can use webpack bundle analyzer to check the package size.
I tried to setup next.js with webpack bundle analyzer, but the setup failed.
No search results were found for the above combination.
So, I used the package below.
@next/bundle-analyzer
https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer
It exists on the next.js github page.
Here are a few notes to keep in mind while setting it up.
- I recommend using next-compose-plugins to configure packages dynamically.
- It took me a while to find this setting.
Configure the package referring to the settings below.
package.json
"scripts": {
...
"analyze": "ANALYZE=true next build"
},
"devDependencies": {
...
"next-compose-plugins": "^2.2.1",
"@next/bundle-analyzer": "^12.3.0",
}
next.config.js
/** @type {import('next').NextConfig} */
const withPlugins = require('next-compose-plugins');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withPlugins([[withBundleAnalyzer]], {
reactStrictMode: false,
compress: true,
});
run
% yarn analyze