mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Make it easy and meaningful to analyze the bundle. (#2393)
This commit is contained in:
parent
12e8b1265d
commit
23c2f02f56
|
@ -11,21 +11,18 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2
|
||||||
cd with-webpack-bundle-analyzer
|
cd with-webpack-bundle-analyzer
|
||||||
```
|
```
|
||||||
|
|
||||||
Install it and run:
|
Install it
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install
|
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
|
## 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)
|
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
|
||||||
|
```
|
||||||
|
|
|
@ -1,17 +1,16 @@
|
||||||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
|
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
|
||||||
|
const { ANALYZE } = process.env
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
webpack: (config, { dev }) => {
|
webpack: function (config) {
|
||||||
// Perform customizations to config
|
if (ANALYZE) {
|
||||||
config.plugins.push(
|
config.plugins.push(new BundleAnalyzerPlugin({
|
||||||
new BundleAnalyzerPlugin({
|
analyzerMode: 'server',
|
||||||
analyzerMode: 'disabled',
|
analyzerPort: 8888,
|
||||||
// For all options see https://github.com/th0r/webpack-bundle-analyzer#as-plugin
|
openAnalyzer: true
|
||||||
generateStatsFile: true,
|
}))
|
||||||
// Will be available at `.next/stats.json`
|
}
|
||||||
statsFilename: 'stats.json'
|
|
||||||
})
|
|
||||||
)
|
|
||||||
// Important: return the modified config
|
|
||||||
return config
|
return config
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,13 +5,15 @@
|
||||||
"dev": "next",
|
"dev": "next",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"bundle:view": "webpack-bundle-analyzer .next/stats.json"
|
"analyze": "cross-env ANALYZE=1 next build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
"react": "^15.4.2",
|
"cross-env": "^5.0.1",
|
||||||
"react-dom": "^15.4.2",
|
"faker": "^4.1.0",
|
||||||
"webpack-bundle-analyzer": "^2.3.0"
|
"react": "^15.6.1",
|
||||||
|
"react-dom": "^15.6.1",
|
||||||
|
"webpack-bundle-analyzer": "^2.8.2"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
|
|
5
examples/with-webpack-bundle-analyzer/pages/contact.js
Normal file
5
examples/with-webpack-bundle-analyzer/pages/contact.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
export default () => (
|
||||||
|
<div>
|
||||||
|
This is the contact page.
|
||||||
|
</div>
|
||||||
|
)
|
|
@ -1,4 +1,29 @@
|
||||||
|
import React from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
export default () => (
|
|
||||||
<div>Hello World. <Link href='/about'><a>About</a></Link></div>
|
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 (
|
||||||
|
<div>
|
||||||
|
<h1>Home Page</h1>
|
||||||
|
<p>Welcome, {name}</p>
|
||||||
|
<div>
|
||||||
|
<Link href='/about'><a>About Page</a></Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -15,7 +15,8 @@ export default class CombineAssetsPlugin {
|
||||||
if (!asset) return
|
if (!asset) return
|
||||||
|
|
||||||
newSource += `${asset.source()}\n`
|
newSource += `${asset.source()}\n`
|
||||||
delete compilation.assets[name]
|
|
||||||
|
// We keep existing assets since that helps when analyzing the bundle
|
||||||
})
|
})
|
||||||
|
|
||||||
compilation.assets[this.output] = {
|
compilation.assets[this.output] = {
|
||||||
|
|
Loading…
Reference in a new issue