1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Add webpack-bundle-analyzer example (#1110)

This commit is contained in:
Tim Neutkens 2017-02-14 03:24:50 +01:00 committed by Arunoda Susiripala
parent 9d529ea0b1
commit 2f7cc9c33c
5 changed files with 69 additions and 0 deletions

View file

@ -0,0 +1,28 @@
# Webpack Bundle Analyzer example
## 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-analyzer
cd hello-world
```
Install it and run:
```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)

View file

@ -0,0 +1,17 @@
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
module.exports = {
webpack: (config, { dev }) => {
// Perform customizations to config
config.plugins.push(
new BundleAnalyzerPlugin({
// For all options see https://github.com/th0r/webpack-bundle-analyzer#as-plugin
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8888,
openAnalyzer: false
})
)
// Important: return the modified config
return config
}
}

View file

@ -0,0 +1,17 @@
{
"name": "hello-world",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "beta",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack-bundle-analyzer": "^2.3.0"
},
"author": "",
"license": "ISC"
}

View file

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

View file

@ -0,0 +1,4 @@
import Link from 'next/link'
export default () => (
<div>Hello World. <Link href='/about'><a>About</a></Link></div>
)