Browserify and Webpack focus on CommonJS modules, and require a Babel plugin to support ES6 modules. Rollup supports native ES6 modules out of the box.
Rollup also supports tree-shaking, a feature that eliminates unused code from the bundle. Let's say you are importing a large utility library supporting 100 functions, but are only using four of them; tree-shaking will remove the 96 that are not required for our app. This can significantly reduce bundle size for applications that have a lot of dependencies.
Traditionally, the community consensus is to use Webpack for applications, and Rollup for libraries. There are two reasons for this:
- Webpack generally produces more boilerplate and thus produces a noticeably larger bundle size that's unnecessary for libraries. This is especially true for earlier versions of Webpack, which would wrap every module inside its own function closures. Not only does this increase bundle size, but it also slows down performance. However, since Webpack 3, these modules are enclosed into one closure using a technique called scope hoisting.
- Webpack supports code-splitting, which is useful for applications but doesn't really help with libraries
However, since their inception, Webpack has added support for tree-shaking, and Rollup has added support for code-splitting, and so the similarities between the tools are increasing.