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 () => ( +
+ This is the contact page. +
+) diff --git a/examples/with-webpack-bundle-analyzer/pages/index.js b/examples/with-webpack-bundle-analyzer/pages/index.js index d120061e..11df6e46 100644 --- a/examples/with-webpack-bundle-analyzer/pages/index.js +++ b/examples/with-webpack-bundle-analyzer/pages/index.js @@ -1,4 +1,29 @@ +import React from 'react' import Link from 'next/link' -export default () => ( -
Hello World. About
-) + +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 ( +
+

Home Page

+

Welcome, {name}

+
+ About Page +
+
+ ) + } +} diff --git a/server/build/plugins/combine-assets-plugin.js b/server/build/plugins/combine-assets-plugin.js index 439c7dd0..5093b051 100644 --- a/server/build/plugins/combine-assets-plugin.js +++ b/server/build/plugins/combine-assets-plugin.js @@ -15,7 +15,8 @@ export default class CombineAssetsPlugin { if (!asset) return newSource += `${asset.source()}\n` - delete compilation.assets[name] + + // We keep existing assets since that helps when analyzing the bundle }) compilation.assets[this.output] = {