b25a983556
Follow-up to https://github.com/vercel/next.js/pull/27463 this adds a note about installing as `devDependency` instead of changing the default install command as the plugin being a `devDependency` might cause issues unless wrapped in a `process.env` check. ## Documentation / Examples - [x] Make sure the linting passes
1.4 KiB
1.4 KiB
Next.js + Webpack Bundle Analyzer
Use webpack-bundle-analyzer
in your Next.js project
Installation
npm install @next/bundle-analyzer
or
yarn add @next/bundle-analyzer
Note: if installing as a devDependency
make sure to wrap the require in a process.env
check as next.config.js
is loaded during next start
as well.
Usage with environment variables
Create a next.config.js (and make sure you have next-bundle-analyzer set up)
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({})
Or configuration as a function:
module.exports = (phase, defaultConfig) => {
return withBundleAnalyzer(defaultConfig)
}
Then you can run the command below:
# Analyze is done on build when env var is set
ANALYZE=true yarn build
When enabled two HTML files (client.html and server.html) will be outputted to <distDir>/analyze/
. One will be for the server bundle, one for the browser bundle.
Usage with next-compose-plugins
From version 2.0.0 of next-compose-plugins you need to call bundle-analyzer in this way to work
const withPlugins = require('next-compose-plugins')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withPlugins([
[withBundleAnalyzer],
// your other plugins here
])