Put production bundle on a diet

Build was previously at a ridiculous 903,456 bytes.

Restructured config to have entirely separate production settings
without any hotloader stuff in the way, dropping it to 132,015 bytes.

This is still too big, as the app is just a production build of React,
11 small JS modules, and a CSS file, but it's a big improvement.

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index e1c31496e0a17c3608a057dcd5b62a656f614a51..bbc055c862eb3d77eaadd6c6641c087817601629 100644 (file)
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -8,6 +8,7 @@ import flow from 'gulp-flowtype';
 import gulp from 'gulp';
 import gutil from 'gulp-util';
 import mocha from 'gulp-spawn-mocha';
+import productionConfig from './webpack.production.config.js';
 import webpack from 'webpack';
 
 let watching = false;
@@ -82,20 +83,7 @@ gulp.task('watch', () => {
 });
 
 gulp.task('webpack:build', callback => {
-  const myConfig = {
-    ...config,
-    plugins: config.plugins.concat(
-      new webpack.DefinePlugin({
-        'process.env': {
-          NODE_ENV: JSON.stringify('production'),
-        },
-      }),
-      new webpack.optimize.DedupePlugin(),
-      new webpack.optimize.UglifyJsPlugin()
-    ),
-  };
-
-  webpack(myConfig, (err, stats) => {
+  webpack(productionConfig, (err, stats) => {
     if (err) {
       ringBell();
       throw new gutil.PluginError('webpack:build', err);

diff --git a/webpack.config.js b/webpack.config.js
index e3e500943f87b7105f5d6ef53ffdd8f811bf33c7..905d01601bdfb1b624a409722ddf84c0b288b4be 100644 (file)
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -29,11 +29,12 @@ module.exports = {
   },
   module: {
     loaders: [{
-      test: /\.jsx?$/,
+      test: /\.js$/,
       loaders: ['react-hot', 'babel'],
       include: path.join(__dirname, 'src')
     }, {
-      test: /\.css$/, loader: 'style-loader!css-loader',
+      test: /\.css$/,
+      loader: 'style-loader!css-loader',
     }],
   }
 };

diff --git a/webpack.production.config.js b/webpack.production.config.js
new file mode 100644 (file)
index 0000000..643ac44
--- /dev/null
+++ b/webpack.production.config.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2015-present Greg Hurrell. All rights reserved.
+ * Licensed under the terms of the MIT license.
+ */
+
+'use strict';
+
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './src/index',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['babel'],
+      include: path.join(__dirname, 'src')
+    }, {
+      test: /\.css$/,
+      loader: 'style-loader!css-loader',
+      include: path.join(__dirname, 'src')
+    }],
+  }
+};