From 334b46e8d90b8f3f6199df85d17af433457d9da9 Mon Sep 17 00:00:00 2001 From: Carlos Date: Mon, 1 Oct 2018 07:24:27 +0800 Subject: [PATCH] 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 | 50 +++++++++++++++++++ examples/analyze-bundles/next.config.js | 21 ++++++++ .../package.json | 11 ++-- .../pages/about.js | 0 .../pages/contact.js | 0 .../pages/index.js | 0 .../with-webpack-bundle-analyzer/README.md | 45 +---------------- .../next.config.js | 17 ------- 8 files changed, 78 insertions(+), 66 deletions(-) create mode 100644 examples/analyze-bundles/README.md create mode 100644 examples/analyze-bundles/next.config.js rename examples/{with-webpack-bundle-analyzer => analyze-bundles}/package.json (53%) rename examples/{with-webpack-bundle-analyzer => analyze-bundles}/pages/about.js (100%) rename examples/{with-webpack-bundle-analyzer => analyze-bundles}/pages/contact.js (100%) rename examples/{with-webpack-bundle-analyzer => analyze-bundles}/pages/index.js (100%) delete mode 100644 examples/with-webpack-bundle-analyzer/next.config.js diff --git a/examples/analyze-bundles/README.md b/examples/analyze-bundles/README.md new file mode 100644 index 00000000..381caffd --- /dev/null +++ b/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 +``` diff --git a/examples/analyze-bundles/next.config.js b/examples/analyze-bundles/next.config.js new file mode 100644 index 00000000..50e1200c --- /dev/null +++ b/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) diff --git a/examples/with-webpack-bundle-analyzer/package.json b/examples/analyze-bundles/package.json similarity index 53% rename from examples/with-webpack-bundle-analyzer/package.json rename to examples/analyze-bundles/package.json index 11e9315f..0f84eb24 100644 --- a/examples/with-webpack-bundle-analyzer/package.json +++ b/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" } diff --git a/examples/with-webpack-bundle-analyzer/pages/about.js b/examples/analyze-bundles/pages/about.js similarity index 100% rename from examples/with-webpack-bundle-analyzer/pages/about.js rename to examples/analyze-bundles/pages/about.js diff --git a/examples/with-webpack-bundle-analyzer/pages/contact.js b/examples/analyze-bundles/pages/contact.js similarity index 100% rename from examples/with-webpack-bundle-analyzer/pages/contact.js rename to examples/analyze-bundles/pages/contact.js diff --git a/examples/with-webpack-bundle-analyzer/pages/index.js b/examples/analyze-bundles/pages/index.js similarity index 100% rename from examples/with-webpack-bundle-analyzer/pages/index.js rename to examples/analyze-bundles/pages/index.js diff --git a/examples/with-webpack-bundle-analyzer/README.md b/examples/with-webpack-bundle-analyzer/README.md index 5ea0dbab..a178c239 100644 --- a/examples/with-webpack-bundle-analyzer/README.md +++ b/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) diff --git a/examples/with-webpack-bundle-analyzer/next.config.js b/examples/with-webpack-bundle-analyzer/next.config.js deleted file mode 100644 index 0ebbfb61..00000000 --- a/examples/with-webpack-bundle-analyzer/next.config.js +++ /dev/null @@ -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 - } -}