Add webpack-bundle-size-analyzer example (#3013)

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

@@ -0,0 +1,28 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-webpack-bundle-size-analyzer)
+
+# Webpack Bundle Size Analyzer
+
+## 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-size-analyzer
+cd with-webpack-bundle-size-analyzer
+```
+
+Install it
+
+```bash
+npm install
+```
+
+## The idea behind the example
+
+This example shows how to analyze the output bundles using [webpack-bundle-size-analyzer](https://www.npmjs.com/package/webpack-bundle-size-analyzer)
+
+To analyze your webpack output, invoke the following command:
+
+```bash
+npm run analyze
+```

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

@@ -0,0 +1,14 @@
+const { WebpackBundleSizeAnalyzerPlugin } = require('webpack-bundle-size-analyzer')
+const { ANALYZE } = process.env
+
+module.exports = {
+  webpack: function (config) {
+    if (ANALYZE) {
+      config.plugins.push(
+        new WebpackBundleSizeAnalyzerPlugin('stats.txt')
+      )
+    }
+
+    return config
+  }
+}

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

@@ -0,0 +1,19 @@
+{
+  "name": "with-webpack-bundle-size-analyzer",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "analyze": "cross-env ANALYZE=1 next build && cat .next/stats.txt"
+  },
+  "dependencies": {
+    "cross-env": "^5.0.1",
+    "faker": "^4.1.0",
+    "next": "latest",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "webpack-bundle-size-analyzer": "^2.7.0"
+  },
+  "license": "ISC"
+}

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

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

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import Link from 'next/link'
+
+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>
+    )
+  }
+}