0

I am looking for a good way to do minification with browserify.

I am developing a react application trying to keep the build setup as simple as possible.

I am using browserify, babelify and watchify. I do not want to use a task runner like grunt or gulp but just npm in order to keep the setup as simple as possible.

I would like to use the same parameters for browserify (production build) and watchify (during development). The compiled js during development should be exactly the same as in the production build (ie I want minification during development as well. And I want the strongest minification possible with browserify. I know there are other module loaders like rollup or systemjs that achieve even smaller outputs but that's not what I am interested in.

My current watch command looks like this: watchify src/main.js -t babelify -t envify -o build/bundle.js -v the corresponding build command looks like this: browserify src/main.js -t babelify -t envify -o build/bundle.js -v

Note that all the parameters look the same. That's how I want to to be in order to keep the commands in sync in the future.

Now my question is how to add uglification/minification.

I tried adding uglifyify like this: -g [ uglifyify --no-sourcemap ] but there are still a lot of line breaks in the output so I guess it's not fully minified.

I also tried removing the -o parameter and piping the output throught uglifyjs as described here. This produces a smaller output but it does not work for the watchify command.

Community
  • 1
  • 1
Laszlo Korte
  • 1,179
  • 8
  • 17
  • 1
    Are you aware that the bundle itself won't be minified? Only the modules that go into it will be, so you will see line breaks around code like this `},{}],2:[function(require,module,exports){` that wraps each of the minified modules. – cartant Oct 25 '16 at 20:35
  • @cartant I was not aware at all that that is the expected behavior. I though I was doing something wrong. Now that explains alot. – Laszlo Korte Oct 26 '16 at 10:42

2 Answers2

2

Take note that uglifyify runs the squeeze transform from uglifyjs but it recommends that you still use uglifyjs on the resulting output.

Uglifyify gives you the benefit of applying Uglify's "squeeze" transform on each file before it's included in the bundle, meaning you can remove dead code paths for conditional requires.

So to change your previous commands to include uglifyjs:

browserify src/main.js -t babelify -t envify -t uglifyify | uglifyjs -cm > build/bundle.min.js

watchify src/main.js -t babelify -t envify -t uglifyify -o 'uglifyjs -cm > build/bundle.min.js' -v

Notes

  • The --outfile / -o switch on the watchify command is able to accept shell commands as longs as they include a | or > character.
  • As you pipe the results after the bundle stage, uglifyjs has to work with the file as a whole rather than smaller chunks so you’ll lose some of the speed benefits that watchify provides.
casr
  • 1,166
  • 2
  • 11
  • 17
  • So if I do not have conditional requires uglifyify is not useful at all? Then what's a good way doing code minification that works for both watchify and browserify commands? – Laszlo Korte Oct 26 '16 at 10:45
  • 1
    I updated my answer to include the minification steps you were missing. Hope that helps! – casr Oct 26 '16 at 13:52
2

You should not use uglify with watchify, i had lot of trouble using it together (terminal crash, ram eater) until i read that some minify tools are incompatible with it.

You dont need minify files for development, just use watchify for development, and browserify + uglify for production bundle.

Here are some scripts examples for npm to use browserify and watchify with babel:

"scripts" : {
  "build": "browserify -t babelify -t uglifyify ./src/app.js -o ./dist/app.min.js",
  "watch": "watchify -t babelify ./src/app.js -o ./dist/app.js --debug"
}

also dont forget your .babelrc file on the root of your project then install this:

npm i -S babel-runtime babel-preset-es2015 browserify watchify

Jose Villalobos
  • 539
  • 5
  • 9
  • This doesn't appear to do anything. This doesn't minify code at all. It doesn't even remove comments. – Cerin Jun 22 '21 at 16:00