| 1 | # Next.js + Webpack Bundle Analyzer
|
| 2 |
|
| 3 | Use `webpack-bundle-analyzer` in your Next.js project
|
| 4 |
|
| 5 | ## Installation
|
| 6 |
|
| 7 | ```
|
| 8 | npm install @next/bundle-analyzer
|
| 9 | ```
|
| 10 |
|
| 11 | or
|
| 12 |
|
| 13 | ```
|
| 14 | yarn add @next/bundle-analyzer
|
| 15 | ```
|
| 16 |
|
| 17 | ### Usage with environment variables
|
| 18 |
|
| 19 | Create a next.config.js (and make sure you have next-bundle-analyzer set up)
|
| 20 |
|
| 21 | ```js
|
| 22 | const withBundleAnalyzer = require('@next/bundle-analyzer')({
|
| 23 | enabled: process.env.ANALYZE === 'true',
|
| 24 | })
|
| 25 | module.exports = withBundleAnalyzer({})
|
| 26 | ```
|
| 27 |
|
| 28 | Then you can run the command below:
|
| 29 |
|
| 30 | ```bash
|
| 31 | # Analyze is done on build when env var is set
|
| 32 | ANALYZE=true yarn build
|
| 33 | ```
|
| 34 |
|
| 35 | 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.
|