diff --git a/examples/with-webpack-bundle-analyzer/README.md b/examples/with-webpack-bundle-analyzer/README.md index 49d3d028..00619a43 100644 --- a/examples/with-webpack-bundle-analyzer/README.md +++ b/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 +``` diff --git a/examples/with-webpack-bundle-analyzer/next.config.js b/examples/with-webpack-bundle-analyzer/next.config.js index 0bd0c84d..ad085831 100644 --- a/examples/with-webpack-bundle-analyzer/next.config.js +++ b/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 } } diff --git a/examples/with-webpack-bundle-analyzer/package.json b/examples/with-webpack-bundle-analyzer/package.json index 2d15a47e..cb1657d9 100644 --- a/examples/with-webpack-bundle-analyzer/package.json +++ b/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" diff --git a/examples/with-webpack-bundle-analyzer/pages/contact.js b/examples/with-webpack-bundle-analyzer/pages/contact.js new file mode 100644 index 00000000..ad1b3696 --- /dev/null +++ b/examples/with-webpack-bundle-analyzer/pages/contact.js @@ -0,0 +1,5 @@ +export default () => ( +