From c20b72139d5815211418454cf016c6c0232c532b Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Mon, 3 Aug 2015 09:49:18 -0700 Subject: [PATCH 1/1] 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. --- gulpfile.babel.js | 16 ++-------------- webpack.config.js | 5 +++-- webpack.production.config.js | 37 ++++++++++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 webpack.production.config.js diff --git a/gulpfile.babel.js b/gulpfile.babel.js index e1c3149..bbc055c 100644 --- 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 e3e5009..905d016 100644 --- 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 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') + }], + } +}; -- 2.40.1