Make it easy and meaningful to analyze the bundle. (vercel#2393)

Author: arunoda

examples/with-webpack-bundle-analyzer/README.md

@@ -11,21 +11,18 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2
 cd with-webpack-bundle-analyzer
 ```
 
-Install it and run:
+Install it
 
 ```bash
 npm install
-npm run dev
-```
-
-Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
-
-```bash
-now
 ```
 
 ## The idea behind the example
 
 This example shows how to analyze the output bundles using [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer#as-plugin)
 
-To view the stats use `npm run bundle:view`
+To analyze your webpack output, invoke the following command:
+
+```bash
+npm run analyze
+```

examples/with-webpack-bundle-analyzer/next.config.js

@@ -1,17 +1,16 @@
-const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const { ANALYZE } = process.env
+
 module.exports = {
-  webpack: (config, { dev }) => {
-    // Perform customizations to config
-    config.plugins.push(
-      new BundleAnalyzerPlugin({
-        analyzerMode: 'disabled',
-        // For all options see https://github.com/th0r/webpack-bundle-analyzer#as-plugin
-        generateStatsFile: true,
-        // Will be available at `.next/stats.json`
-        statsFilename: 'stats.json'
-      })
-    )
-    // Important: return the modified config
+  webpack: function (config) {
+    if (ANALYZE) {
+      config.plugins.push(new BundleAnalyzerPlugin({
+        analyzerMode: 'server',
+        analyzerPort: 8888,
+        openAnalyzer: true
+      }))
+    }
+
     return config
   }
 }

examples/with-webpack-bundle-analyzer/package.json

@@ -5,13 +5,15 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "bundle:view": "webpack-bundle-analyzer .next/stats.json"
+    "analyze": "cross-env ANALYZE=1 next build"
   },
   "dependencies": {
     "next": "latest",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "webpack-bundle-analyzer": "^2.3.0"
+    "cross-env": "^5.0.1",
+    "faker": "^4.1.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "webpack-bundle-analyzer": "^2.8.2"
   },
   "author": "",
   "license": "ISC"

examples/with-webpack-bundle-analyzer/pages/contact.js

@@ -0,0 +1,5 @@
+export default () => (
+  <div>
+    This is the contact page.
+  </div>
+)

examples/with-webpack-bundle-analyzer/pages/index.js

@@ -1,4 +1,29 @@
+import React from 'react'
 import Link from 'next/link'
-export default () => (
-  <div>Hello World. <Link href='/about'><a>About</a></Link></div>
-)
+
+export default class Index extends React.Component {
+  static getInitialProps ({ req }) {
+    if (req) {
+      // Runs only in the server
+      const faker = require('faker')
+      const name = faker.name.findName()
+      return { name }
+    }
+
+    // Runs only in the client
+    return { name: 'Arunoda' }
+  }
+
+  render () {
+    const { name } = this.props
+    return (
+      <div>
+        <h1>Home Page</h1>
+        <p>Welcome, {name}</p>
+        <div>
+          <Link href='/about'><a>About Page</a></Link>
+        </div>
+      </div>
+    )
+  }
+}

server/build/plugins/combine-assets-plugin.js

@@ -15,7 +15,8 @@ export default class CombineAssetsPlugin {
         if (!asset) return
 
         newSource += `${asset.source()}\n`
-        delete compilation.assets[name]
+
+        // We keep existing assets since that helps when analyzing the bundle
       })
 
       compilation.assets[this.output] = {