Add webpack-bundle-analyzer example (#1110)

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

@@ -0,0 +1,28 @@
+
+# Webpack Bundle Analyzer example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-webpack-bundle-analyzer
+cd hello-world
+```
+
+Install it and run:
+
+```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)

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

@@ -0,0 +1,17 @@
+const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
+module.exports = {
+  webpack: (config, { dev }) => {
+    // Perform customizations to config
+    config.plugins.push(
+      new BundleAnalyzerPlugin({
+        // For all options see https://github.com/th0r/webpack-bundle-analyzer#as-plugin
+        analyzerMode: 'server',
+        analyzerHost: '127.0.0.1',
+        analyzerPort: 8888,
+        openAnalyzer: false
+      })
+    )
+    // Important: return the modified config
+    return config
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "name": "hello-world",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "beta",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "webpack-bundle-analyzer": "^2.3.0"
+  },
+  "author": "",
+  "license": "ISC"
+}

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

@@ -0,0 +1,3 @@
+export default () => (
+  <div>About us</div>
+)

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

@@ -0,0 +1,4 @@
+import Link from 'next/link'
+export default () => (
+  <div>Hello World. <Link href='/about'><a>About</a></Link></div>
+)