Validates production code splitting

Author: Alex-ray

package.json

@@ -5,7 +5,10 @@
   "main": "index.js",
   "scripts": {
     "development": "NODE_PATH=./src NODE_ENV=development node ./src/server/server.babel.js",
-    "production": "NODE_PATH=./src NODE_ENV=production node ./src/server/server.babel.js"
+    "production": "NODE_PATH=./src NODE_ENV=production node ./src/server/server.babel.js",
+    "build": "npm run build:client && npm run build:server",
+    "build:server": "NODE_ENV=production webpack --config ./webpack/server.babel.js",
+    "build:client": "NODE_ENV=production webpack --config ./webpack/production.babel.js"
   },
   "keywords": [
     "react",
@@ -20,6 +23,7 @@
   "author": "Alexander J Ray <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "assets-webpack-plugin": "^3.5.1",
     "autoprefixer": "^6.7.7",
     "babel-loader": "^6.4.1",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -30,6 +34,7 @@
     "babel-preset-stage-0": "^6.22.0",
     "babel-register": "^6.24.0",
     "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^2.1.0",
     "less-loader": "^4.0.3",
     "postcss-loader": "^1.3.3",
     "react-hot-loader": "^3.0.0-beta.6",

src/server/server.js

@@ -13,9 +13,9 @@ const PROD = process.env.NODE_ENV === 'production';
 
 const app = express();
 
-
 if (PROD) {
-
+  app.use('/static', express.static('build'));
+  app.get('*', renderPage);
 } else {
   const HMR = require('./hmr.js');
   // Hot Module Reloading

src/universal/routes/Routes.js

@@ -3,17 +3,16 @@ import React, {Component, PropTypes} from  'react';
 import {Route, Redirect} from 'react-router';
 
 // Routes
-import * as RouteMap from 'universal/routes/index.js';
+// For Development only
+// import * as RouteMap from '../routes/index.js';
+
+// This is used in production for code splitting via `wepback.config.server.js`
+import * as RouteMap from 'universal/routes/async.js';
 
 // Containers
 import AppContainer from 'universal/containers/App/AppContainer.js';
 // import PrivateRouteContainer from 'universal/containers/PrivateRoute/PrivateRouteContainer.js';
 
-// Styles
-import {
-  background
-} from 'universal/styles/global.less';
-
 class Routes extends Component {
   render () {
     const {

src/universal/routes/async.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+function asyncRoute(getComponent) {
+  return class AsyncComponent extends React.Component {
+    state = {
+      Component: null
+    };
+
+    componentDidMount() {
+      if ( this.state.Component === null ) {
+        getComponent().then((Component) => {
+          this.setState({Component: Component});
+        })
+      }
+    }
+
+    render() {
+      const {
+        Component
+      } = this.state;
+
+      if ( Component ) {
+        return (<Component {...this.props} />);
+      }
+      return (<div>loading...</div>); // or <div /> with a loading spinner, etc..
+    }
+  }
+}
+
+export const Home = asyncRoute(() => {
+  return System.import('../components/Home/Home.js');
+});
+
+export const Counter = asyncRoute(() => {
+  return System.import('../modules/counter/containers/Counter/CounterContainer.js');
+});

webpack/production.babel.js

@@ -0,0 +1,2 @@
+require('babel-register');
+module.exports = require('./webpack.config.production.js');

webpack/server.babel.js

@@ -0,0 +1,2 @@
+require('babel-register');
+module.exports = require('./webpack.config.server.js');

webpack/webpack.config.development.js

@@ -55,7 +55,14 @@ export default {
   },
   module: {
     loaders: [
-      {test: /\.(png|j|jpeg|gif|svg|woff|woff2)$/, loader: 'url-loader?limit=10000'},
+      {test: /\.(png|j|jpeg|gif|svg|woff|woff2)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000
+          }
+        }
+      },
 
       // Javascript
       {test: /\.js$/,
@@ -65,7 +72,7 @@ export default {
       },
 
       // CSS
-      {test: /\.css|less$/,
+      {test: /\.css$/,
        include: clientInclude,
        use: [
          {loader: 'style-loader'},
@@ -74,10 +81,8 @@ export default {
             root: src,
             modules: true,
             importLoaders: 1,
-            localIdentName: '[path][name]-[local]'
-          }},
-          {loader: 'less-loader'},
-          {loader: 'postcss-loader'}
+            localIdentName: '[name]_[local]_[hash:base64:5]'
+          }}
        ]
       }
     ]

webpack/webpack.config.production.js

@@ -0,0 +1,107 @@
+import path from 'path';
+import webpack from 'webpack';
+import qs from 'querystring';
+
+import autoprefixer from 'autoprefixer';
+import AssetsPlugin from 'assets-webpack-plugin';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+
+const root = process.cwd();
+const src  = path.join(root, 'src');
+const build = path.join(root, 'build');
+
+const clientSrc    = path.join(src, 'client');
+const universalSrc = path.join(src, 'universal');
+
+const clientInclude = [clientSrc, universalSrc];
+
+// Cache vendor && client javascript on CDN...
+const vendor = [
+  'react',
+  'react-dom',
+  'react-router',
+  'react-redux',
+  'redux'
+];
+
+export default {
+  context: src,
+  entry: {
+    app: [
+      'babel-polyfill/dist/polyfill.js',
+      './client/client.js'
+    ],
+    vendor
+  },
+  output: {
+    filename: '[name]_[chunkhash].js',
+    chunkFilename: '[name]_[chunkhash].js',
+    path: build,
+    publicPath: '/static/'
+  },
+  resolve: {
+    extensions: ['.js'],
+    modules: [src, 'node_modules'],
+    unsafeCache: true
+  },
+  node: {
+    dns: 'mock',
+    net: 'mock'
+  },
+  plugins: [
+   new webpack.NamedModulesPlugin(),
+   new ExtractTextPlugin('[name].css'),
+   new webpack.NormalModuleReplacementPlugin(/\.\.\/routes\/index/, '../routes/async'),
+   new webpack.optimize.CommonsChunkPlugin({
+     names: ['vendor', 'manifest'],
+     minChunks: Infinity
+   }),
+   new webpack.optimize.AggressiveMergingPlugin(),
+   /* minChunkSize should be 50000 for production apps
+    * 10 is for this example */
+   new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10}),
+   new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}, comments: /(?:)/}),
+   new AssetsPlugin({path: build, filename: 'assets.json'}),
+   new webpack.NoEmitOnErrorsPlugin(),
+   new webpack.DefinePlugin({
+     '__CLIENT__': true,
+     '__PRODUCTION__': true,
+     'process.env.NODE_ENV': JSON.stringify('production')
+   })
+ ],
+ module: {
+   loaders: [
+     {test: /\.(png|j|jpeg|gif|svg|woff|woff2)$/,
+       use: {
+         loader: 'url-loader',
+         options: {
+           limit: 10000
+         }
+       }
+     },
+
+     // JavaScript
+     {test: /\.js$/,
+       loader: 'babel-loader',
+       include: clientInclude
+     },
+
+     // CSS
+     {test: /\.css|less$/,
+      include: clientInclude,
+      loaders: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [
+          {loader: 'css-loader',
+           options: {
+             root: src,
+             modules: true,
+             importLoaders: 1,
+             localIdentName: '[name]_[local]_[hash:base64:5]'
+           }}
+        ]})
+     }
+
+   ]
+ }
+};

webpack/webpack.config.server.js

@@ -0,0 +1,79 @@
+import path from 'path';
+import webpack from 'webpack';
+import qs from 'querystring';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+
+// Paths
+const root = process.cwd();
+const src  = path.join(root, 'src');
+const build = path.join(root, 'build');
+const universal = path.join(src, 'universal');
+const server = path.join(src, 'server');
+
+const serverInclude = [server, universal];
+
+export default {
+  context: src,
+  entry: {
+    prerender: './universal/routes/Routes.js'
+  },
+  target: 'node',
+  output: {
+    path: build,
+    chunkFilename: '[name]_[chunkhash].js',
+    filename: '[name].js',
+    libraryTarget: 'commonjs2',
+    publicPath: '/static/'
+  },
+  resolve: {
+    extensions: ['.js'],
+    modules: [src, 'node_modules']
+  },
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin(),
+    new ExtractTextPlugin('[name].css'),
+    new webpack.NormalModuleReplacementPlugin(/\.\.\/routes\/index/, '../routes/async'),
+    new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}}),
+    new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
+    new webpack.DefinePlugin({
+      '__CLIENT__': false,
+      '__PRODUCTION__': true,
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ],
+  module: {
+    loaders: [
+      {test: /\.(png|j|jpeg|gif|svg|woff|woff2)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000
+          }
+        }
+      },
+
+      {
+        test: /\.css$/,
+        include: serverInclude,
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {loader: 'css-loader',
+             options: {
+               root: src,
+               modules: true,
+               importLoaders: 1,
+               localIdentName: '[name]_[local]_[hash:base64:5]'
+             }}
+          ]})
+      },
+
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: serverInclude
+      }
+
+    ]
+  }
+};