Merge pull request #775 from weaveworks/build-performance

Speed up npm bundle builds

client/build/index.html

@@ -14,6 +14,7 @@
       <div id="app"></div>
     </div>
 
+    <script src="vendors.js"></script>
     <script src="app.js"></script>
   </body>
 </html>

client/build/terminal.html

@@ -14,6 +14,7 @@
       <div id="app"></div>
     </div>
 
+    <script src="vendors.js"></script>
     <script src="terminal-app.js"></script>
   </body>
 </html>

client/package.json

@@ -58,7 +58,7 @@
     "webpack-dev-server": "~1.12.1"
   },
   "scripts": {
-    "build": "webpack -p --config webpack.production.config.js",
+    "build": "webpack --config webpack.production.config.js",
     "start": "node server.js",
     "start-production": "NODE_ENV=production node server.js",
     "test": "jest",

client/server.js

@@ -19,7 +19,7 @@ var app = express();
 
 
 // Serve application file depending on environment
-app.get(/(app|terminal-app).js/, function(req, res) {
+app.get(/(app|terminal-app|vendors).js/, function(req, res) {
   var filename = req.originalUrl;
   if (process.env.NODE_ENV === 'production') {
     res.sendFile(__dirname + '/build' + filename);

client/webpack.local.config.js

@@ -32,7 +32,9 @@ module.exports = {
       './app/scripts/terminal-main',
       'webpack-dev-server/client?http://localhost:4041',
       'webpack/hot/only-dev-server'
-    ]
+    ],
+    vendors: ['classnames', 'd3', 'dagre', 'flux', 'immutable',
+      'lodash', 'page', 'react', 'react-dom', 'react-motion']
   },
 
   // This will not actually create a app.js file in ./build. It is used
@@ -45,12 +47,17 @@ module.exports = {
 
   // Necessary plugins for hot load
   plugins: [
+    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],
 
   // Transform source code using Babel and React Hot Loader
   module: {
+    include: [
+      path.resolve(__dirname, 'app/scripts')
+    ],
+
     preLoaders: [
       {
         test: /\.js$/,

client/webpack.production.config.js

@@ -14,9 +14,13 @@ module.exports = {
   // fail on first error when building release
   bail: true,
 
+  cache: {},
+
   entry: {
     app: './app/scripts/main',
-    'terminal-app': './app/scripts/terminal-main'
+    'terminal-app': './app/scripts/terminal-main',
+    vendors: ['classnames', 'd3', 'dagre', 'flux', 'immutable',
+      'lodash', 'page', 'react', 'react-dom', 'react-motion']
   },
 
   output: {
@@ -25,6 +29,9 @@ module.exports = {
   },
 
   module: {
+    include: [
+      path.resolve(__dirname, 'app/scripts')
+    ],
     preLoaders: [
       {
         test: /\.js$/,
@@ -65,7 +72,10 @@ module.exports = {
 
   plugins: [
     new webpack.DefinePlugin(GLOBALS),
+    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
+    new webpack.optimize.OccurenceOrderPlugin(true),
     new webpack.optimize.UglifyJsPlugin({
+      sourceMap: false,
       compress: {
         warnings: false
       }