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.
|