Build speed v2 (#195)

* Improve build speed by using cheap source maps and dropping eslint loader.

* use old 'source-map' on dev when SLOW_BUILD_SPEED env variable exists

* Increase build speed further via caching and DLL

* Cleanup code

* Add step to readme

* Move DLL loader to dev instead of base

* Add post install script

* Revert readme change

* ignore dll dir

.gitignore

@@ -44,3 +44,5 @@ jspm_packages
 
 # VScode workspace settings
 .vscode/
+static/dll.vendor.js
+dll

common/index.html

@@ -8,7 +8,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
-
+    <script src="/dll.vendor.js"></script>
     <link rel="manifest" href="/manifest.json">
     <link rel="shortcut icon" href="/favicon.ico">
     <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">

common/vendors.js

@@ -0,0 +1,28 @@
+require('ethereumjs-abi');
+require('ethereumjs-util');
+require('ethereumjs-wallet');
+require('hdkey');
+require('idna-uts46');
+require('lodash');
+require('react');
+require('react-dom');
+require('react-markdown');
+require('react-redux');
+require('react-router');
+require('react-router-redux');
+require('redux');
+require('redux-form');
+require('redux-logger');
+require('redux-saga');
+require('wallet-address-validator');
+require('scryptsy');
+require('store2');
+require('uuid');
+require('whatwg-fetch');
+require('moment');
+require('prop-types');
+require('qrcode');
+require('qrcode.react');
+require('bignumber.js');
+require('classnames');
+require('./vendor/trezor-connect');

package.json

@@ -110,6 +110,7 @@
     "predev": "check-node-version --package",
     "flow": "flow",
     "derivation-checker": "babel-node common/derivation-checker.js --presets es2015,stage-0,flow",
+    "postinstall": "webpack --config=./webpack_config/webpack.dll.js",
     "start": "npm run dev",
     "precommit": "lint-staged"
   },

webpack_config/webpack.base.js

@@ -7,6 +7,7 @@ const config = require('./config');
 const _ = require('./utils');
 
 module.exports = {
+  cache: true,
   entry: {
     client: './common/index.jsx'
   },
@@ -31,7 +32,12 @@ module.exports = {
     loaders: [
       {
         test: /\.(js|jsx)$/,
-        loaders: ['babel-loader'],
+        loaders: [
+          {
+            loader: 'babel-loader',
+            query: { cacheDirectory: true }
+          }
+        ],
         exclude: [/node_modules\/(?!ethereum-blockies|idna-uts46)/]
       },
       {

webpack_config/webpack.dev.js

@@ -1,6 +1,6 @@
 'use strict';
 process.env.NODE_ENV = 'development';
-
+const path = require('path');
 const webpack = require('webpack');
 const base = require('./webpack.base');
 const FriendlyErrors = require('friendly-errors-webpack-plugin');
@@ -25,6 +25,10 @@ base.module.loaders.push(
 );
 
 base.plugins.push(
+  new webpack.DllReferencePlugin({
+    context: path.join(__dirname, '../common'),
+    manifest: require('../dll/vendor-manifest.json')
+  }),
   new webpack.DefinePlugin({
     'process.env.NODE_ENV': JSON.stringify('development')
   }),

webpack_config/webpack.dll.js

@@ -0,0 +1,31 @@
+const path = require('path');
+const webpack = require('webpack');
+const config = require('./config');
+const _ = require('./utils');
+
+module.exports = {
+  entry: {
+    vendor: [path.join(__dirname, '../common', 'vendors.js')]
+  },
+  output: {
+    path: path.join(__dirname, '../static'),
+    filename: 'dll.[name].js',
+    library: '[name]'
+  },
+  plugins: [
+    new webpack.DllPlugin({
+      path: path.join(__dirname, '../dll', '[name]-manifest.json'),
+      name: '[name]',
+      context: path.resolve(__dirname, '../common')
+    })
+  ],
+  resolve: {
+    modules: [
+      // places where to search for required modules
+      'node_modules',
+      config.srcPath,
+      _.cwd('node_modules'),
+      _.cwd('./')
+    ]
+  }
+};