Split React into a separate chunk

Author: gaearon

config/webpack.config.prod.js

@@ -12,6 +12,7 @@ var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var WebpackMd5Hash = require('webpack-md5-hash');
 var url = require('url');
 var paths = require('./paths');
 
@@ -25,7 +26,13 @@ if (!publicPath.endsWith('/')) {
 module.exports = {
   bail: true,
   devtool: 'source-map',
-  entry: path.join(paths.appSrc, 'index'),
+  entry: {
+    // Split app into the main and vendor bundles.
+    // Vendor will contain React by default but we might want to
+    // dynamically choose to add something else from node_modules.
+    main: path.join(paths.appSrc, 'index'),
+    vendor: ['react', 'react-dom'],
+  },
   output: {
     path: paths.appBuild,
     filename: '[name].[chunkhash:8].js',
@@ -92,10 +99,53 @@ module.exports = {
     return [autoprefixer];
   },
   plugins: [
+    // Create two common chunks:
+    // - "vendor" chunk is declared in "entry" above.
+    // - "manifest" is a built-in Webpack chunk with its runtime.
+    // This would enable us to enable long-term caching.
+    // The tricky part is that "manifest" will contain the filenames
+    // of the other chunks. This is why we want to embed it into HTML.
+    // Otherwise, changes in any chunk will cause manifest to change,
+    // and thus if manifest isn't separated, its parent will also change.
+    // Relevant discussion: https://github.com/webpack/webpack/issues/1315
+    new webpack.optimize.CommonsChunkPlugin({
+      names: ['vendor', 'manifest']
+    }),
+    // Fixes deterministic hashes so that changes to CSS don't invalidate JS.
+    new WebpackMd5Hash(),
+    // Avoids extra request for the manifest that contains webpack runtime
+    // by embedding it right into HTML as an inline <script>.
+    function embedManifestIntoHTML() {
+      this.plugin('compilation', (compilation) => {
+        compilation.plugin('html-webpack-plugin-before-html-processing', (data, cb) => {
+          var manifestSource;
+          // Find the manifest chunk generated by webpack,
+          // grab its source, and embed it into generated HTML.
+          Object.keys(compilation.assets).forEach(key => {
+            if (key.indexOf('manifest.') !== 0) {
+              return;
+            }
+            var children = compilation.assets[key].children;
+            if (!children || !children[0]) {
+              return;
+            }
+            delete compilation.assets[key];
+            manifestSource = children[0]._value;
+          });
+          data.html = data.html.replace(
+            '</body>',
+            '<script>' + manifestSource + '</script></body>'
+          );
+          cb()
+        })
+      })
+    },
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
       favicon: paths.appFavicon,
+      chunksSortMode: 'dependency', // Ensure vendor chunk comes first.
+      excludeChunks: ['manifest'], // We embedded it earlier.
       minify: {
         removeComments: true,
         collapseWhitespace: true,

package.json

@@ -57,7 +57,8 @@
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "webpack": "1.13.1",
-    "webpack-dev-server": "1.14.1"
+    "webpack-dev-server": "1.14.1",
+    "webpack-md5-hash": "0.0.5"
   },
   "devDependencies": {
     "bundle-deps": "1.0.0",