Production build and route splitting.

.gitignore

@@ -1,5 +1,4 @@
-build
-package
+dist
 node_modules
 binaries
 npm-debug.log

package.json

@@ -21,7 +21,7 @@
     "test": "electron-mocha --renderer --reporter dot --recursive -r setup-referee-sinon/globals test/unit --compilers js:babel-core/register",
     "test-ci": "npm run lint && npm run test",
     "prepackage": "npm run clean",
-    "package": "webpack --env.env=prod",
+    "package": "webpack --env.production",
     "predist": "npm run package",
     "dist": "build --x64",
     "predist:win64": "npm run package",

src/routes.js

@@ -2,13 +2,24 @@ import React from 'react';
 import { Route, IndexRoute } from 'react-router';
 
 import App from './containers/app.js';
-import Home from './containers/home.js';
-import Requests from './containers/requests.js';
-import UrlMappings from './containers/url-mappings.js';
+
+function loadRoute(cb) {
+  return (module) => cb(null, module.default);
+}
+
+function onError(err) {
+  console.error('Failed to load route', err);
+}
 
 export default
   <Route path="/" component={App}>
-    <IndexRoute component={Home} />
-    <Route path="requests" component={Requests} />
-    <Route path="url-mappings" component={UrlMappings}/>
+    <IndexRoute getComponent={(location, cb) => {
+      System.import('./containers/home.js').then(loadRoute(cb)).catch(onError);
+    }} />
+    <Route path="requests" getComponent={(location, cb) => {
+      System.import('./containers/requests.js').then(loadRoute(cb)).catch(onError);
+    }} />
+    <Route path="url-mappings" getComponent={(location, cb) => {
+      System.import('./containers/url-mappings.js').then(loadRoute(cb)).catch(onError);
+    }}/>
   </Route>;

webpack.config.js

@@ -1,4 +1,6 @@
 const path = require('path');
+const webpack = require('webpack');
+const CommonsChunkPlugin = require('webpack').optimize.CommonsChunkPlugin;
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const renderer = {
@@ -36,8 +38,6 @@ const renderer = {
   }
 };
 
-// TODO: set process.env.NODE_ENV = production for prod builds (webpack.DefinePlugin)
-
 const main = {
   entry: {
     'main': './src/main/index.js'
@@ -58,7 +58,33 @@ const main = {
   }
 };
 
-module.exports = [
-  renderer,
-  main
-];
+function productionize(config, options = {}, uglify = true) {
+  if (!options.production) return config;
+  if (!config.plugins) config.plugins = [];
+
+  config.plugins.push(
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false
+    })
+  )
+  if (uglify) {
+    // note: uglify + es6 don't get along, so skip main
+    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
+        compress: { warnings: false }
+      })
+    );
+  }
+
+  return config;
+}
+
+module.exports = function (options) {
+  return [
+    productionize(renderer, options),
+    productionize(main, options, false)
+  ]
+}