Add analyze bundles example (#5332)

* Add analyze-bundles example

* housekeeping: with-webpack-bundle-analyzer example

* analyze-bundles example: revert the version of faker library

* analyze-bundles add analyze:server and analyze:browser to scripts

* with-webpack-bundle-analyzer example: fix typo

examples/analyze-bundles/README.md

@@ -0,0 +1,50 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/analyze-bundles)
+
+# Analyzer Bundles example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example analyze-bundles analyze-bundles-app
+# or
+yarn create next-app --example analyze-bundles analyze-bundles-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/analyze-bundles
+cd analyze-bundles
+```
+
+Install it
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+## The idea behind the example
+
+This example shows how to analyze the output bundles using [@zeit/next-bundle-analyzer](https://github.com/zeit/next-plugins/tree/master/packages/next-bundle-analyzer)
+
+To analyze your webpack output, invoke the following command:
+
+```bash
+npm run analyze
+npm run analyze:server
+npm run analyze:browser
+# or
+yarn analyze
+yarn analyze:server
+yarn analyze:browser
+```

examples/analyze-bundles/next.config.js

@@ -0,0 +1,21 @@
+const withBundleAnalyzer = require('@zeit/next-bundle-analyzer')
+
+const nextConfig = {
+  analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
+  analyzeBrowser: ['browser', 'both'].includes(process.env.BUNDLE_ANALYZE),
+  bundleAnalyzerConfig: {
+    server: {
+      analyzerMode: 'static',
+      reportFilename: '../bundles/server.html'
+    },
+    browser: {
+      analyzerMode: 'static',
+      reportFilename: './bundles/client.html'
+    }
+  },
+  webpack (config) {
+    return config
+  }
+}
+
+module.exports = withBundleAnalyzer(nextConfig)

examples/analyze-bundles/package.json

@@ -5,15 +5,16 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "analyze": "cross-env ANALYZE=1 next build"
+    "analyze": "BUNDLE_ANALYZE=both next build",
+    "analyze:server": "BUNDLE_ANALYZE=server next build",
+    "analyze:browser": "BUNDLE_ANALYZE=browser next build"
   },
   "dependencies": {
-    "next": "latest",
-    "cross-env": "^5.0.1",
+    "@zeit/next-bundle-analyzer": "^0.1.2",
     "faker": "^4.1.0",
+    "next": "latest",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "webpack-bundle-analyzer": "^2.8.2"
+    "react-dom": "^16.0.0"
   },
   "license": "ISC"
 }

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

@@ -1,46 +1,3 @@
-[![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-analyzer)
-
 # Webpack Bundle Analyzer example
 
-## How to use
-
-### Using `create-next-app`
-
-Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-webpack-bundle-analyzer with-webpack-bundle-analyzer-app
-# or
-yarn create next-app --example with-webpack-bundle-analyzer with-webpack-bundle-analyzer-app
-```
-
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-webpack-bundle-analyzer
-cd with-webpack-bundle-analyzer
-```
-
-Install it
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
-## 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 analyze your webpack output, invoke the following command:
-
-```bash
-npm run analyze
-# or
-yarn analyze
-```
+This example have been moved here: [analyze-bundles](https://github.com/zeit/next.js/tree/canary/examples/analyze-bundles)

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

@@ -1,17 +0,0 @@
-const { ANALYZE } = process.env
-
-module.exports = {
-  webpack: function (config, { isServer }) {
-    if (ANALYZE) {
-      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
-
-      config.plugins.push(new BundleAnalyzerPlugin({
-        analyzerMode: 'server',
-        analyzerPort: isServer ? 8888 : 8889,
-        openAnalyzer: true
-      }))
-    }
-
-    return config
-  }
-}