feat(webpack): add code splitting and chunkhash to assets

Author: somus

client/routes.js

@@ -1,14 +1,34 @@
-import { Route, IndexRoute } from 'react-router';
-import React from 'react';
 import App from './modules/App/App';
-import PostListPage from './modules/Post/pages/PostListPage/PostListPage';
-import PostDetailPage from './modules/Post/pages/PostDetailPage/PostDetailPage';
 
-const routes = (
-  <Route path="/" component={App} >
-    <IndexRoute component={PostListPage} />
-    <Route path="/post/:slug" component={PostDetailPage} />
-  </Route>
-);
+function errorLoading(err) {
+  console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
+}
+function loadRoute(cb) {
+  return (module) => cb(null, module.default);
+}
 
-export default routes;
+// React Router with code-splitting
+// More Info: https://medium.com/modus-create-front-end-development/automatic-code-splitting-for-react-router-w-es6-imports-a0abdaa491e9
+export default {
+  component: App,
+  childRoutes: [
+    {
+      path: '/',
+      name: 'home',
+      getComponent(nextState, cb) {
+        System.import('./modules/Post/pages/PostListPage/PostListPage')
+          .then(loadRoute(cb))
+          .catch(errorLoading);
+      },
+    },
+    {
+      path: '/post/:slug',
+      name: 'post-detail',
+      getComponent(nextState, cb) {
+        System.import('./modules/Post/pages/PostDetailPage/PostDetailPage')
+          .then(loadRoute(cb))
+          .catch(errorLoading);
+      },
+    },
+  ],
+};

index.js

@@ -2,6 +2,15 @@
 if (process.env.NODE_ENV === 'production') {
   require('./static/dist/server.bundle.js');
 } else {
+  // System.import polyfill
+  if (typeof System === 'undefined') {
+    System = {
+      import: function(path) {
+        return Promise.resolve(require(path));
+      },
+    };
+  }
+
   require('babel-register');
   require('babel-polyfill');
   require('css-modules-require-hook');

package.json

@@ -59,6 +59,7 @@
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.9.0",
     "chai": "^3.5.0",
+    "chunk-manifest-webpack-plugin": "0.0.1",
     "clean-css": "^3.4.13",
     "css-loader": "^0.23.1",
     "css-modules-require-hook": "^4.0.1",
@@ -70,6 +71,7 @@
     "eslint-plugin-react": "^5.1.1",
     "expect": "^1.20.1",
     "extract-text-webpack-plugin": "^1.0.1",
+    "json-loader": "^0.5.4",
     "mocha": "^2.5.3",
     "nodemon": "^1.9.2",
     "pre-commit": "^1.1.3",
@@ -82,9 +84,10 @@
     "style-loader": "^0.13.1",
     "supertest": "^1.2.0",
     "webpack": "^2.1.0-beta.8",
-    "webpack-dev-server": "^2.1.0-beta.0",
     "webpack-dev-middleware": "^1.6.1",
-    "webpack-hot-middleware": "^2.10.0"
+    "webpack-dev-server": "^2.1.0-beta.0",
+    "webpack-hot-middleware": "^2.10.0",
+    "webpack-manifest-plugin": "^1.0.1"
   },
   "engines": {
     "node": ">=4"

server/server.js

@@ -33,6 +33,10 @@ import posts from './routes/post.routes';
 import dummyData from './dummyData';
 import serverConfig from './config';
 
+// Import Manifests
+const assetsManifest = require('../static/dist/manifest.json'); // eslint-disable-line import/no-unresolved
+const chunkManifest = require('../static/dist/chunk-manifest.json'); // eslint-disable-line import/no-unresolved
+
 // MongoDB Connection
 mongoose.connect(serverConfig.mongoURL, (error) => {
   if (error) {
@@ -73,8 +77,12 @@ const renderFullPage = (html, initialState) => {
         <div id="root">${html}</div>
         <script>
           window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
+          //<![CDATA[
+          window.webpackManifest = ${JSON.stringify(chunkManifest)};
+          //]]>
         </script>
-        <script src="/dist/bundle.js"></script>
+        ${process.env.NODE_ENV === 'production' ? `<script src='${assetsManifest['/dist/vendor.js']}'></script>` : ''}
+        <script src="${assetsManifest['/dist/app.js']}"></script>
       </body>
     </html>
   `;

webpack.config.dev.js

@@ -12,7 +12,7 @@ module.exports = {
 
   output: {
     path: __dirname + '/dist/',
-    filename: 'bundle.js',
+    filename: 'app.js',
     publicPath: '/dist/',
   },
 

webpack.config.prod.js

@@ -1,14 +1,25 @@
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var ManifestPlugin = require('webpack-manifest-plugin');
+var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
 
 module.exports = {
   devtool: 'source-map',
 
-  entry: __dirname + "/client/index.js",
+  entry: {
+    app: [
+      './client/index.js',
+    ],
+    vendor: [
+      'react',
+      'react-dom',
+    ]
+  },
 
   output: {
     path: __dirname + '/static/dist/',
-    filename: 'bundle.js',
+    filename: '[name].[chunkhash].js',
+    publicPath: '/dist/',
   },
 
   resolve: {
@@ -35,6 +46,18 @@ module.exports = {
         'NODE_ENV': JSON.stringify('production'),
       }
     }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: Infinity,
+      filename: 'vendor.js'
+    }),
+    new ManifestPlugin({
+      basePath: '/dist/'
+    }),
+    new ChunkManifestPlugin({
+      filename: "chunk-manifest.json",
+      manifestVariable: "webpackManifest"
+    }),
     new webpack.optimize.UglifyJsPlugin({
       compressor: {
         warnings: false,

webpack.server.js

@@ -40,6 +40,10 @@ module.exports = {
           ],
         },
       },
+      {
+        test: /\.json$/,
+        loader: 'json-loader',
+      },
     ],
   },
 };