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

Optimize the bundle size of Next.js core (#2422)

Browse source 
* Try to the slim the webpack output.

* Remove react-hot-loader completely from production.
This commit is contained in:
Arunoda Susiripala 2017-07-01 12:54:16 +05:30 committed by GitHub
parent 1ecba3b84d
commit 304225d9ea
2 changed files with 16 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
lib/app.js
View file

@ -1,12 +1,8 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { AppContainer } from 'react-hot-loader'
import shallowEquals from './shallow-equals' import shallowEquals from './shallow-equals'
import { warn } from './utils' import { warn } from './utils'
const ErrorDebug = process.env.NODE_ENV === 'production'
? null : require('./error-debug').default
export default class App extends Component { export default class App extends Component {
static childContextTypes = { static childContextTypes = {
headManager: PropTypes.object headManager: PropTypes.object
@ -62,11 +58,20 @@ class Container extends Component {
render () { render () {
const { Component, props, url } = this.props const { Component, props, url } = this.props
// includes AppContainer which bypasses shouldComponentUpdate method if (process.env.NODE_ENV === 'production') {
// https://github.com/gaearon/react-hot-loader/issues/442 return (<Component {...props} url={url} />)
return <AppContainer errorReporter={ErrorDebug}> } else {
<Component {...props} url={url} /> const ErrorDebug = require('./error-debug').default
</AppContainer> const { AppContainer } = require('react-hot-loader')
// includes AppContainer which bypasses shouldComponentUpdate method
// https://github.com/gaearon/react-hot-loader/issues/442
return (
<AppContainer errorReporter={ErrorDebug}>
<Component {...props} url={url} />
</AppContainer>
)
}
} }
} }

12
server/build/webpack.js
View file

@ -107,7 +107,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
// used in all of the pages. Otherwise, move modules used in at-least // used in all of the pages. Otherwise, move modules used in at-least
// 1/2 of the total pages into commons. // 1/2 of the total pages into commons.
if (totalPages <= 2) { if (totalPages <= 2) {
return count === totalPages return count >= totalPages
} }
return count >= totalPages * 0.5 return count >= totalPages * 0.5
} }
@ -138,6 +138,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
plugins.push(new FriendlyErrorsWebpackPlugin()) plugins.push(new FriendlyErrorsWebpackPlugin())
} }
} else { } else {
plugins.push(new webpack.IgnorePlugin(/react-hot-loader/))
plugins.push( plugins.push(
new CombineAssetsPlugin({ new CombineAssetsPlugin({
input: ['manifest.js', 'commons.js', 'main.js'], input: ['manifest.js', 'commons.js', 'main.js'],
@ -311,15 +312,6 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
performance: { hints: false } performance: { hints: false }
} }
if (!dev) {
// We do this to use the minified version of React in production.
// This will significant file size redution when turned off uglifyjs.
webpackConfig.resolve.alias = {
'react': require.resolve('react/dist/react.min.js'),
'react-dom': require.resolve('react-dom/dist/react-dom.min.js')
}
}
if (config.webpack) { if (config.webpack) {
console.log(`> Using "webpack" config function defined in ${config.configOrigin}.`) console.log(`> Using "webpack" config function defined in ${config.configOrigin}.`)
webpackConfig = await config.webpack(webpackConfig, { dev }) webpackConfig = await config.webpack(webpackConfig, { dev })