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 | Or configuration as a function:
|
29 |
|
30 | ```js
|
31 | module.exports = (phase, defaultConfig) => {
|
32 | return withBundleAnalyzer(defaultConfig)
|
33 | }
|
34 | ```
|
35 |
|
36 | Then you can run the command below:
|
37 |
|
38 | ```bash
|
39 | # Analyze is done on build when env var is set
|
40 | ANALYZE=true yarn build
|
41 | ```
|
42 |
|
43 | 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.
|