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

* Try to the slim the webpack output.

* Remove react-hot-loader completely from production.

lib/app.js

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

server/build/webpack.js

@@ -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
         // 1/2 of the total pages into commons.
         if (totalPages <= 2) {
-          return count === totalPages
+          return count >= totalPages
         }
         return count >= totalPages * 0.5
       }
@@ -138,6 +138,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
       plugins.push(new FriendlyErrorsWebpackPlugin())
     }
   } else {
+    plugins.push(new webpack.IgnorePlugin(/react-hot-loader/))
     plugins.push(
       new CombineAssetsPlugin({
         input: ['manifest.js', 'commons.js', 'main.js'],
@@ -311,15 +312,6 @@ export default async function createCompiler (dir, { dev = false, quiet = 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) {
     console.log(`> Using "webpack" config function defined in ${config.configOrigin}.`)
     webpackConfig = await config.webpack(webpackConfig, { dev })