dryleaf · March 25, 2021 02:18 · Mar 25, 2021 · Mar 25, 2021 · Mar 25, 2021 · Mar 25, 2021
diff --git a/add-webpack-bundle-analyzer-to-NextJs-app.md b/add-webpack-bundle-analyzer-to-NextJs-app.md
@@ -74,4 +74,4 @@ yarn build:analyze
 
 ### References
 - https://excitoninteractive.com/articles/read/65/webpack4/step-by-step-bundle-analyzer-plugin
-- https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
+- https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
diff --git a/add-webpack-bundle-analyzer-to-NextJs-app.md b/add-webpack-bundle-analyzer-to-NextJs-app.md
@@ -30,7 +30,7 @@ module.exports = {
     if (isAnalyze) {
       config.plugins.push(new BundleAnalyzerPlugin({
         analyzerMode: 'server',
-        analyzerPort: isServer ? 1111 : 1112, // configure server and client ports separately, whatever you want (*^_^*)
+        analyzerPort: isServer ? 1111 : 1112, // configure server/client ports separately
         openAnalyzer: true,
       }));
     }

diff --git a/add-webpack-bundle-analyzer-to-NextJs-app.md b/add-webpack-bundle-analyzer-to-NextJs-app.md
@@ -1,6 +1,6 @@
-### Adding webpack bundle analyzer to NextJs app (Production)
+### 1. Adding webpack bundle analyzer to NextJs app (Production)
 
-**Install webpack bundle analyzer as a dev dependancy**
+**a) Install webpack bundle analyzer as a dev dependancy**
 ```
 npm install --save-dev webpack-bundle-analyzer
 ```
@@ -9,7 +9,8 @@ or
 yarn add -D webpack-bundle-analyzer
 ```
 
-**please install cross-env as well (so that we can pass environment variables)**
+**b) Install cross-env as well**
+- so that we can pass environment variables
 ```
 npm install --save-dev cross-env
 ```
@@ -18,7 +19,7 @@ or
 yarn add -D cross-env
 ```
 
-### Initialize webpack analyzer into your `next.config.js` file
+### 2. Initialize webpack analyzer into your `next.config.js` file
 ```
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 // This is important so that you control when to build next app with bundle analyzer
@@ -38,7 +39,7 @@ module.exports = {
 }
 ```
 
-### Add `build:analyze` into your `package.json > scripts` section
+### 3. Add `build:analyze` into your `package.json > scripts` section
 - In case you don't use a custom express server, only use the alternative line with `next dev` and `next start` line
 ```diff
 {
@@ -62,7 +63,7 @@ module.exports = {
 }
 ```
 
-### Finally, we build production ready code with analyzer
+### 4. Finally, build code with analyzer
 ```
 npm run build:analyze
 ```

diff --git a/add-webpack-bundle-analyzer-to-NextJs-app.md b/add-webpack-bundle-analyzer-to-NextJs-app.md
@@ -1,6 +1,6 @@
-## Adding webpack bundle analyzer to NextJs app (Production)
+### Adding webpack bundle analyzer to NextJs app (Production)
 
-### Install webpack bundle analyzer as a dev dependancy
+**Install webpack bundle analyzer as a dev dependancy**
 ```
 npm install --save-dev webpack-bundle-analyzer
 ```
@@ -9,7 +9,7 @@ or
 yarn add -D webpack-bundle-analyzer
 ```
 
-### please install cross-env as well (so that we can pass environment variables)
+**please install cross-env as well (so that we can pass environment variables)**
 ```
 npm install --save-dev cross-env
 ```
@@ -18,7 +18,7 @@ or
 yarn add -D cross-env
 ```
 
-## Initialize webpack analyzer into your next.config.js file
+### Initialize webpack analyzer into your `next.config.js` file
 ```
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 // This is important so that you control when to build next app with bundle analyzer
@@ -38,7 +38,7 @@ module.exports = {
 }
 ```
 
-## Add build:analyze into your package.json `scripts` section
+### Add `build:analyze` into your `package.json > scripts` section
 - In case you don't use a custom express server, only use the alternative line with `next dev` and `next start` line
 ```diff
 {
@@ -62,7 +62,7 @@ module.exports = {
 }
 ```
 
-## Finally, we build production ready code with analyzer
+### Finally, we build production ready code with analyzer
 ```
 npm run build:analyze
 ```
@@ -71,6 +71,6 @@ or
 yarn build:analyze
 ```
 
-**References**
+### References
 - https://excitoninteractive.com/articles/read/65/webpack4/step-by-step-bundle-analyzer-plugin
 - https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
diff --git a/...undle analyzer to NextJs app (Production) → add-webpack-bundle-analyzer-to-NextJs-app.md b/...undle analyzer to NextJs app (Production) → add-webpack-bundle-analyzer-to-NextJs-app.md
@@ -1,4 +1,4 @@
-## Add webpack bundle analyzer
+## Adding webpack bundle analyzer to NextJs app (Production)
 
 ### Install webpack bundle analyzer as a dev dependancy
 ```

diff --git a/Adding webpack bundle analyzer to NextJs app (Production) b/Adding webpack bundle analyzer to NextJs app (Production)
@@ -0,0 +1,76 @@
+## Add webpack bundle analyzer
+
+### Install webpack bundle analyzer as a dev dependancy
+```
+npm install --save-dev webpack-bundle-analyzer
+```
+or
+```
+yarn add -D webpack-bundle-analyzer
+```
+
+### please install cross-env as well (so that we can pass environment variables)
+```
+npm install --save-dev cross-env
+```
+or
+```
+yarn add -D cross-env
+```
+
+## Initialize webpack analyzer into your next.config.js file
+```
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+// This is important so that you control when to build next app with bundle analyzer
+const isAnalyze = typeof process.env.BUNDLE_ANALYZE !== "undefined";
+
+module.exports = {
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    if (isAnalyze) {
+      config.plugins.push(new BundleAnalyzerPlugin({
+        analyzerMode: 'server',
+        analyzerPort: isServer ? 1111 : 1112, // configure server and client ports separately, whatever you want (*^_^*)
+        openAnalyzer: true,
+      }));
+    }
+    return config
+  },
+}
+```
+
+## Add build:analyze into your package.json `scripts` section
+- In case you don't use a custom express server, only use the alternative line with `next dev` and `next start` line
+```diff
+{
+  ...
+  ...
+  "scripts": {
+-   "dev": "node server.js",
++   "dev": "next dev",
+    "build": "next build",
+    "build:analyze": "cross-env BUNDLE_ANALYZE=true next build",
+-   "start": "cross-env NODE_ENV=production node server.js"
++   "start": "next start"
+  },
+  ...
+  ...
+  ...
+  "devDependencies": {
+    "cross-env": "^5.2.1",
+    "webpack-bundle-analyzer": "^4.4.0"
+  }
+}
+```
+
+## Finally, we build production ready code with analyzer
+```
+npm run build:analyze
+```
+or
+```
+yarn build:analyze
+```
+
+**References**
+- https://excitoninteractive.com/articles/read/65/webpack4/step-by-step-bundle-analyzer-plugin
+- https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
No results found