Bake-in support for webpack DLLs #1201

Author: bertho-zero

.eslintrc

@@ -51,6 +51,7 @@
     "__SERVER__": true,
     "__DISABLE_SSR__": true,
     "__DEVTOOLS__": true,
+    "__DLLS__": true,
     "socket": true,
     "webpackIsomorphicTools": true
   }

.gitignore

@@ -5,3 +5,5 @@ dist/
 webpack-assets.json
 webpack-stats.json
 npm-debug.log
+.happypack
+webpack/dlls/manifests/*.json

bin/server.js

@@ -9,6 +9,7 @@ global.__CLIENT__ = false;
 global.__SERVER__ = true;
 global.__DISABLE_SSR__ = false;  // <----- DISABLES SERVER SIDE RENDERING FOR ERROR DEBUGGING
 global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production';
+global.__DLLS__ = process.env.WEBPACK_DLLS === '1';
 
 if (__DEVELOPMENT__) {
   if (!require('piping')({

karma.conf.js

@@ -11,6 +11,7 @@ module.exports = function(config) {
 
     files: [
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
+      process.env.WEBPACK_DLLS === '1' ? './static/dist/dlls/dll__vendor.js' : null,
       'tests.webpack.js'
     ],
 
@@ -56,7 +57,8 @@ module.exports = function(config) {
           __CLIENT__: true,
           __SERVER__: false,
           __DEVELOPMENT__: true,
-          __DEVTOOLS__: false  // <-------- DISABLE redux-devtools HERE
+          __DEVTOOLS__: false,  // <-------- DISABLE redux-devtools HERE
+          __DLLS__: process.env.WEBPACK_DLLS === '1'
         })
       ]
     },

package.json

@@ -28,7 +28,8 @@
     "start-prod": "better-npm-run start-prod",
     "start-prod-api": "better-npm-run start-prod-api",
     "build": "better-npm-run build",
-    "postinstall": "npm run build",
+    "build-dlls": "webpack --verbose --colors --display-error-details --config webpack/vendor.config.js",
+    "postinstall": "npm run build && npm run build-dlls",
     "lint": "eslint -c .eslintrc src api",
     "start-dev": "better-npm-run start-dev",
     "start-dev-api": "better-npm-run start-dev-api",
@@ -62,7 +63,8 @@
         "NODE_PATH": "./src",
         "NODE_ENV": "development",
         "PORT": 3000,
-        "APIPORT": 3030
+        "APIPORT": 3030,
+        "WEBPACK_DLLS": 1
       }
     },
     "start-dev-api": {
@@ -79,7 +81,8 @@
         "UV_THREADPOOL_SIZE": 100,
         "NODE_PATH": "./src",
         "PORT": 3000,
-        "APIPORT": 3030
+        "APIPORT": 3030,
+        "WEBPACK_DLLS": 1
       }
     },
     "build": {
@@ -167,6 +170,7 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "font-awesome": "^4.4.0",
     "font-awesome-webpack": "0.0.4",
+    "happypack": "^2.1.1",
     "json-loader": "^0.5.4",
     "karma": "^0.13.10",
     "karma-cli": "^1.0.0",

src/containers/App/App.js

@@ -28,12 +28,16 @@ import { asyncConnect } from 'redux-connect';
   }
 }])
 @connect(
-  state => ({ user: state.auth.user }),
+  state => ({
+    notifs: state.notifs,
+    user: state.auth.user
+  }),
   { logout, pushState: push })
 export default class App extends Component {
   static propTypes = {
     children: PropTypes.object.isRequired,
     user: PropTypes.object,
+    notifs: PropTypes.object,
     logout: PropTypes.func.isRequired,
     pushState: PropTypes.func.isRequired
   };
@@ -58,7 +62,7 @@ export default class App extends Component {
   };
 
   render() {
-    const { user } = this.props;
+    const { user, notifs } = this.props;
     const styles = require('./App.scss');
 
     return (
@@ -117,13 +121,13 @@ export default class App extends Component {
         </Navbar>
 
         <div className={styles.appContent}>
-          <div className="container">
+          {notifs.global && <div className="container">
             <Notifs
               className={styles.notifs}
               namespace="global"
               NotifComponent={props => <Alert bsStyle={props.kind}>{props.message}</Alert>}
             />
-          </div>
+          </div>}
 
           {this.props.children}
         </div>

src/helpers/Html.js

@@ -52,6 +52,7 @@ export default class Html extends Component {
             dangerouslySetInnerHTML={{ __html: `window.__data=${serialize(store.getState())};` }}
             charSet="UTF-8"
           />
+          {__DLLS__ && <script key="dlls__vendor" src="/dist/dlls/dll__vendor.js" charSet="UTF-8" />}
           <script src={assets.javascript.main} charSet="UTF-8" />
 
           {/* (will be present only in development mode) */}

webpack/dev.config.js

@@ -7,6 +7,7 @@ var webpack = require('webpack');
 var assetsPath = path.resolve(__dirname, '../static/dist');
 var host = (process.env.HOST || 'localhost');
 var port = (+process.env.PORT + 1) || 3001;
+var { installVendorDLL, createSourceLoader, createHappyPlugin } = require('./helpers');
 
 // https://github.com/halt-hammerzeit/webpack-isomorphic-tools
 var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
@@ -61,7 +62,7 @@ reactTransform[1].transforms.push({
   locals: ['module']
 });
 
-module.exports = {
+var webpackConfig = module.exports = {
   devtool: 'inline-source-map',
   context: path.resolve(__dirname, '..'),
   entry: {
@@ -80,20 +81,27 @@ module.exports = {
   },
   module: {
     loaders: [
-      {
+      createSourceLoader({
+        happy: { id: 'jsx' },
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']
-      },
-      { test: /\.json$/, loader: 'json-loader' },
-      {
+        loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader'],
+      }),
+      createSourceLoader({
+        happy: { id: 'json' },
+        test: /\.json$/,
+        loader: 'json-loader',
+      }),
+      createSourceLoader({
+        happy: { id: 'less' },
         test: /\.less$/,
-        loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap'
-      },
-      {
+        loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap',
+      }),
+      createSourceLoader({
+        happy: { id: 'sass' },
         test: /\.scss$/,
-        loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
-      },
+        loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap',
+      }),
       { test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
       { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
       { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
@@ -119,6 +127,15 @@ module.exports = {
       __DEVELOPMENT__: true,
       __DEVTOOLS__: true  // <-------- DISABLE redux-devtools HERE
     }),
-    webpackIsomorphicToolsPlugin.development()
+    webpackIsomorphicToolsPlugin.development(),
+
+    createHappyPlugin('jsx'),
+    createHappyPlugin('json'),
+    createHappyPlugin('less'),
+    createHappyPlugin('sass'),
   ]
 };
+
+if (process.env.WEBPACK_DLLS === '1') {
+  installVendorDLL(webpackConfig, 'vendor');
+}

webpack/dlls/README.md

@@ -0,0 +1 @@
+Files in this directory are auto-generated. DO NOT EDIT!

webpack/helpers.js

@@ -0,0 +1,74 @@
+var path = require('path');
+var projectRootPath = path.resolve(__dirname, '../');
+var webpack = require('webpack');
+var HappyPack = require('happypack');
+var happyThreadPool = HappyPack.ThreadPool({ size: 5 });
+
+module.exports = {
+  createSourceLoader,
+  createHappyPlugin,
+  installVendorDLL
+};
+
+// restrict loader to files under /src
+function createSourceLoader(spec) {
+  return Object.keys(spec).reduce(function (x, key) {
+    x[key] = spec[key];
+
+    return x;
+  }, {
+    include: [path.resolve(__dirname, '../src')]
+  });
+}
+
+function createHappyPlugin(id) {
+  return new HappyPack({
+    id: id,
+    threadPool: happyThreadPool,
+
+    // disable happypack with HAPPY=0
+    enabled: process.env.HAPPY !== '0',
+
+    // disable happypack caching with HAPPY_CACHE=0
+    cache: process.env.HAPPY_CACHE !== '0',
+
+    // make happypack more verbose with HAPPY_VERBOSE=1
+    verbose: process.env.HAPPY_VERBOSE === '1',
+  });
+}
+
+function installVendorDLL(config, dllName) {
+  if (process.env.WEBPACK_DLLS === '1') {
+    var manifest = loadDLLManifest(path.join(projectRootPath, `webpack/dlls/${dllName}.json`));
+
+    if (manifest) {
+      console.warn(`Webpack: will be using the ${dllName} DLL.`);
+
+      config.plugins.push(new webpack.DllReferencePlugin({
+        context: projectRootPath,
+        manifest: manifest
+      }));
+    }
+  }
+};
+
+function loadDLLManifest(filePath) {
+  try {
+    return require(filePath);
+  }
+  catch (e) {
+    process.env.WEBPACK_DLLS = '0';
+
+    console.error(`========================================================================
+  Environment Error
+------------------------------------------------------------------------
+You have requested to use webpack DLLs (env var WEBPACK_DLLS=1) but a
+manifest could not be found. This likely means you have forgotten to
+build the DLLs.
+You can do that by running:
+    npm run build-dlls
+The request to use DLLs for this build will be ignored.`);
+  }
+
+  return undefined;
+}

webpack/prod.config.js

@@ -70,7 +70,8 @@ module.exports = {
       __CLIENT__: true,
       __SERVER__: false,
       __DEVELOPMENT__: false,
-      __DEVTOOLS__: false
+      __DEVTOOLS__: false,
+      __DLLS__: false,
     }),
 
     // ignore dev config

webpack/vendor.config.js

@@ -0,0 +1,83 @@
+var path = require('path');
+var webpack = require('webpack');
+var projectRootPath = path.resolve(__dirname, '../');
+
+module.exports = {
+  devtool: process.env.NODE_ENV === 'production' ? null : 'inline-source-map',
+
+  output: {
+    path: path.join(projectRootPath, 'static/dist/dlls'),
+    filename: 'dll__[name].js',
+    library: 'DLL_[name]_[hash]'
+  },
+
+  entry: {
+    vendor: [
+      'babel-polyfill',
+
+      // <babel-runtime>
+      //
+      // Generate this list using the following command against the stdout of
+      // webpack running against the source bundle config (dev/prod.js):
+      //
+      //     egrep -o 'babel-runtime/\S+' | sed 's/\.js$//' | sort | uniq | wc -l
+      'babel-runtime/core-js/array/from',
+      'babel-runtime/core-js/get-iterator',
+      'babel-runtime/core-js/is-iterable',
+      'babel-runtime/core-js/json/stringify',
+      'babel-runtime/core-js/number/is-integer',
+      'babel-runtime/core-js/number/is-safe-integer',
+      'babel-runtime/core-js/object/define-property',
+      'babel-runtime/core-js/object/get-own-property-descriptor',
+      'babel-runtime/core-js/object/get-own-property-names',
+      'babel-runtime/core-js/object/get-prototype-of',
+      'babel-runtime/core-js/promise',
+      'babel-runtime/helpers/create-class',
+      'babel-runtime/helpers/createClass',
+      'babel-runtime/helpers/defineProperty',
+      'babel-runtime/helpers/get',
+      'babel-runtime/helpers/possibleConstructorReturn',
+      'babel-runtime/helpers/slicedToArray',
+      'babel-runtime/helpers/to-consumable-array',
+      'babel-runtime/helpers/toConsumableArray',
+      // </babel-runtime>
+
+      'invariant',
+      'multireducer',
+      'react',
+      'react-bootstrap',
+      'react-dom',
+      'react-helmet',
+      'react-inline-css',
+      'react-redux',
+      'react-router',
+      'react-router-bootstrap',
+      'react-router-redux',
+      'redux',
+      'redux-connect',
+      'redux-form',
+      'scroll-behavior',
+      'serialize-javascript',
+      'socket.io-client',
+      'superagent',
+      'warning',
+    ]
+  },
+
+  resolve: {
+    root: path.resolve(projectRootPath, 'node_modules'),
+    extensions: ['', '.js'],
+    postfixes: [],
+  },
+
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+    }),
+
+    new webpack.DllPlugin({
+      path: path.join(projectRootPath, 'webpack/dlls/[name].json'),
+      name: 'DLL_[name]_[hash]'
+    })
+  ]
+};