Just started to use browserify, but I cannot find documentation for how to get it spilling out minified output.
So I am looking something like:
$> browserify main.js > bundle.js --minified
-
9Minification is outside the scope of browserify, you'll need to run it's output through a minifier.generalhenry– generalhenry2013-03-23 19:32:30 +00:00Commented Mar 23, 2013 at 19:32
Add a comment
|
6 Answers
Pipe it through uglifyjs:
browserify main.js | uglifyjs > bundle.js
You can install it using npm like so:
npm install -g uglify-js
9 Comments
Greg Ennis
How to do this with grunt browserify/watchify task?
topek
If you use grunt I would recommend to do it in two steps. First compile with browserify and then minify. The advantage is that you can have a development build with source maps and a production build that strips everything.
Greg Ennis
Yes thats what I ended up doing. Its actually 3 steps, you have to clean up the intermediate file. Thanks!
Thomas Deutsch
and what if i want a sourcemap for my uglified files - that will point to the code before "browserification"?
Ben
@ThomasDeutsch I made a plugin for that.
|
As of 3.38.x you can use my minifyify plugin to minify your bundle and still have usable sourcemaps. This is not possible with the other solutions -- the best you can do is map back to the uncompressed bundle. Minifyify maps all the way back to your separate source files (yes, even to coffeescript!)
2 Comments
cchamberlain
It says it supports up to browserify version 9. Browserify is currently at 11.0.1. Will it support this?
Brett Zamir
uglifyify seems to be working for me as a good replacement
Or use uglifyify transform which "gives you the benefit applying Uglify's "squeeze" transform before it's processed by Browserify, meaning you can remove dead code paths for conditional requires."
1 Comment
carlin.scott
It still requires using the uglify pipe shown in the top answer. They say so right there in the beginning of their doc.
After spending a few hours investigating how to construct new build processes, I thought others may benefit from what I ended up doing. I'm answering on this old question as it appears high in Google.
My use case is a little more involved than OP asked for. I have three build scenarios: development, testing, production. As most professional developers will have the same requirements, I think it's excusable to go beyond the scope of the original question.
In development, I use watchify to build an uncompressed bundle with source map whenever a JavaScript file changes. I don't want the uglify step since I want the build to finish before I've alt-tabbed to the browser to hit refresh and it's not of any benefit during development anyway. To achieve this I use:
watchify app/index.js --debug -o app/bundle.js -v
For testing, I want the exact same code as production (e.g. uglified) but I also want a source map. I achieve this with:
browserify app/index.js -d | uglifyjs -cm -o app/bundle.js --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"
For production, the code is compressed with uglify and there is no source map.
browserify app/index.js | uglifyjs -cm > app/bundle.js
Notes:
I have used these instructions on Windows 7, MacOS High Sierra and Ubuntu 16.04.
I have stopped using minifyify because it is no longer maintained.
There maybe better ways than what I am sharing. I have read it is apparently possible to get superior compression by uglifying all source files before combining with browserify. If you've got more time to spend on it than I have, you may wish to investigate that.
If you do not have watchify, uglify-js or browserify installed already, install them with npm thus:
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
If you have old versions installed I recommend you upgrade. Particularly uglify-js as they made a breaking change to command line arguments which invalidates a lot of information that comes up in Google.
Comments
I like terser which has support for ES6+ and some good comporession as well.
browserify main.js | terser --compress --mangle > bundle.js
Install globallly:
npm i -g terser
1 Comment
mfink
Thanks! This just worked straight up. No fuss like uglifyjs / minifyify
No need to use plugins anymore to minify while preserving a source map:
browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
