I am using webpack and gulp via node/npm to build and uglify browser application. The problem is that the output app.js is about 1.9Mb. It seems far too big and suggests I'm probably missing something.
I start the build process using gulp build --release
This is my gulp file:
import path from 'path';
import cp from 'child_process';
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import del from 'del';
import mkdirp from 'mkdirp';
import runSequence from 'run-sequence';
import webpack from 'webpack';
import minimist from 'minimist';
const $ = gulpLoadPlugins();
const argv = minimist(process.argv.slice(2));
const src = Object.create(null);
let watch = false;
let browserSync;
// The default task
gulp.task('default', ['sync']);
// Clean output directory
gulp.task('clean', cb => {
del(['.tmp', 'build/*', '!build/.git'], {dot: true}, () => {
mkdirp('build/public', cb);
});
});
// Static files
gulp.task('assets', () => {
src.assets = 'src/public/**';
return gulp.src(src.assets)
.pipe($.changed('build/public'))
.pipe(gulp.dest('build/public'))
.pipe($.size({title: 'assets'}));
});
// Resource files
gulp.task('resources', () => {
src.resources = [
'package.json',
'src/content*/**',
'src/templates*/**'
];
return gulp.src(src.resources)
.pipe($.changed('build'))
.pipe(gulp.dest('build'))
.pipe($.size({title: 'resources'}));
});
// Bundle
gulp.task('bundle', cb => {
const config = require('./webpack.config.js');
const bundler = webpack(config);
const verbose = !!argv.verbose;
let bundlerRunCount = 0;
function bundle(err, stats) {
if (err) {
throw new $.util.PluginError('webpack', err);
}
if (++bundlerRunCount === (watch ? config.length : 1)) {
return cb();
}
}
if (watch) {
bundler.watch(200, bundle);
} else {
bundler.run(bundle);
}
});
// Build the app from source code
gulp.task('build', ['clean'], cb => {
runSequence(['assets', 'resources'], ['bundle'], cb);
});
EDIT:
The final app.js is minified and I am using DedupePlugin, UglifyJsPlugin, and AggressiveMergingPlugin as well.
Here is the the relevant (I hope) part of my webpack.config
const DEBUG = !argv.release;
const appConfig = merge({}, config, {
entry: './src/app.js',
output: {
path: './build/public',
filename: 'app.js'
},
node: {
fs: 'empty'
},
devtool: DEBUG ? 'eval-cheap-module-source-map' : false,
plugins: config.plugins.concat([
new DefinePlugin(merge(GLOBALS, {
'__SERVER__': false
}))
].concat(DEBUG ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin()
])
)
});
