ES6 & Dead Code Elimination

I recently got pointed rollup, which produces clean builds by assuming the source is using ES6 import/export. It then can mash all the modules into the same closure, instead of the current browser-pack approach that tends to produce a lot of extra boilerplate and closures. It can also tree-shake unused functions.

It would be worth exploring whether something similar is possible in browserify (or, as a plugin/transform independently of browserify).

Big things to figure out:

• a means of resolving to ES6 source for packages written in ES6 and pre-published to ES5. Right now rollup uses esnext:main which isn’t exactly standard, and maybe could be named better (i.e. what happens with ES7?). It would also be good to have other bundlers like jspm and webpack agree on the same approach.
• how to take the rollup approach (single closure) rather than bundle-pack approach (closure per module) and what kind of problems this might impose

[nolanlawson]

One of the more poorly-understood benefits of Rollup’s approach is that, in addition to tree-shaking, it also hoists modules into a single scope. This is really only possible because of the semantics of ES6 modules, which unlike CommonJS does not enforce a separate function scope for every module.

The traditional CJS solution to tree-shaking is to make your modules as tiny as possible, or use tricks like require('some/deep/func'), but the problem there is that the more you modularize, the more you introduce cruft when you browserify/webpack, due to the required function-scoping boilerplate for every module. You’re punished for doing the right thing.

We noticed this problem in PouchDB, so we recently introduced Rollup as a prebuild step before Browserify, and migrated from CJS to ES6. We had a codebase with lots of small submodules (many files were a single function, 5-20 lines or so). We also had no dead code, as verified by Istanbul coverage tests. However, even without any tree-shaking, Rollup managed to save us 3KB out of 48KB total, which is nothing to sneeze at.

If Browserify or a Browserify plugin could do this same trick, we’d probably be happy to cut Rollup out of our build pipeline and use Browserify only. 😃

[ghost]

I think we can close this issue now thanks to the great work of @indutny and @goto-bus-stop with common-shake, browser-pack-flat, and common-shakeify.

Using a combination these tools:

• uglifyify
• common-shakeify
• browser-pack-flat
• minify-stream

you’ll get tree shaking and dead code elimination.

Or you can use tinyify as a plugin which wraps up the aforementioned tools into an easy-to-use zero-configuration package:

browserify -p tinyify main.js

bankai includes these tinyify optimizations by default.