Skip to content

Instantly share code, notes, and snippets.

@mattdesl
Last active August 9, 2019 13:21
Show Gist options
  • Save mattdesl/57825db09d5193916cb3 to your computer and use it in GitHub Desktop.
Save mattdesl/57825db09d5193916cb3 to your computer and use it in GitHub Desktop.
fast & optimized browserify builds

Small script for development + builds with browserify.

Uses loose-envify for faster inlining and cross-env to handle windows/unix shells.

Dev features:

  • fast rebuilds w/ watchify, LiveReload, syntax errors in DOM, etc.

Build features:

  • uglify, simple dead code elimination, optimized bundle.
npm install --save-dev cross-env browserify budo babelify loose-envify bundle-collapser uglify-js unreachable-branch-transform
var entry = 'index.js';
// Some options shared in dev + prod
var bundleOpts = {
debug: true, // inline source maps
transform: [
'babelify',
'loose-envify'
]
};
if (process.env.NODE_ENV === 'development') {
// fast dev server
require('budo')(entry, {
serve: 'bundle.js',
stream: process.stdout, // log requests in terminal
live: true, // enable LiveReload
browserify: bundleOpts
});
} else {
// optimized production bundle
require('browserify')(entry, bundleOpts)
.transform('unreachable-branch-transform', { // dead code elimination
global: true // so that it runs on dependencies, e.g. react, react-dom
})
.plugin('bundle-collapser/plugin') // smaller bundle size
.bundle()
.pipe(process.stdout);
}
...
"scripts": {
"start": "cross-env NODE_ENV=development node build.js",
"build": "cross-env NODE_ENV=production node build.js | uglifyjs -cm > app/bundle.js"
}
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment