Need advice about which tool to choose?Ask the StackShare community!

Browserify

1.8K
414
+ 1
261
rollup

1.8K
163
+ 1
17
Add tool

Browserify vs rollup: What are the differences?

Introduction

In web development, JavaScript bundlers are essential for organizing and optimizing code. Two popular bundlers are Browserify and Rollup. While they serve a similar purpose, there are some key differences between the two.

  1. Module Resolution: Browserify primarily relies on the CommonJS module system, which is prevalent in Node.js applications. It uses the require() function to import and export modules. On the other hand, Rollup adopts the ES module system, leveraging the import and export statements. This system offers better tree-shaking capabilities, resulting in smaller bundle sizes.

  2. Tree Shaking: Rollup excels in tree shaking, which is the process of eliminating unused code from the final bundle. It can recognize dead code and remove it, resulting in smaller and more optimized bundles. Browserify, on the other hand, lacks built-in tree-shaking capabilities and may include unused code in the bundle.

  3. Code Splitting: Rollup provides built-in code splitting capabilities, allowing developers to split their code into smaller chunks that can be loaded on-demand. This feature is particularly useful for large applications with many modules. Browserify lacks native support for code splitting, which can result in larger initial bundle sizes.

  4. Configuration: Browserify utilizes a single configuration file, typically named package.json or browserify.js, to specify settings and options. In contrast, Rollup uses a dedicated configuration file, usually named rollup.config.js, where developers can define various options such as input and output files, plugins, and external dependencies.

  5. Plugin Ecosystem: While both bundlers offer a wide range of plugins to extend functionality, the plugin ecosystem for Rollup is more extensive. Rollup's ecosystem includes various plugins for tasks like transpiling code, generating sourcemaps, and optimizing output. Browserify also has a significant number of plugins available, but the variety and community support might be slightly more limited.

  6. Customization and Extensibility: Rollup provides a more flexible and extensible architecture, allowing developers to customize and extend its functionality to suit their specific needs. It offers a modular plugin system, making it easier to create and integrate custom plugins. Browserify, while still customizable, has a more opinionated approach and may require more workarounds for specific requirements.

In summary, Browserify and Rollup differ in their module resolution systems, tree-shaking capabilities, code splitting support, configuration approaches, plugin ecosystems, and customization options. While both bundlers serve the purpose of bundling JavaScript code, Rollup offers superior tree-shaking and code splitting features, while Browserify might be better suited for CommonJS-centric applications.

Decisions about Browserify and rollup

We mostly use rollup to publish package onto NPM. For most all other use cases, we use the Meteor build tool (probably 99% of the time) for publishing packages. If you're using Node on FHIR you probably won't need to know rollup, unless you are somehow working on helping us publish front end user interface components using FHIR. That being said, we have been migrating away from Atmosphere package manager towards NPM. As we continue to migrate away, we may publish other NPM packages using rollup.

See more
Manage your open source components, licenses, and vulnerabilities
Learn More
Pros of Browserify
Pros of rollup
  • 75
    Node style browser code
  • 52
    Load modules installed by npm
  • 45
    Works great with gulp.js
  • 38
    NPM modules in the brower
  • 34
    Open source
  • 16
    Node streams
  • 1
    Easy setup
  • 4
    Makes it easy to publish packages
  • 3
    Easier configuration
  • 2
    Better tree shaking
  • 2
    Provides smaller bundle size
  • 1
    Integrates seamlessly with SystemJS
  • 1
    Produces very clean code
  • 1
    Very reliable
  • 1
    Very robust Plugin-API (years old Plugins still work)
  • 1
    Very flexible
  • 1
    Was built with ESM-Modules in mind

Sign up to add or upvote prosMake informed product decisions

Cons of Browserify
Cons of rollup
    Be the first to leave a con
    • 1
      No clear path for static assets
    • 1
      No Loader like Webpack (need to use sjs or ESM imports)
    • 1
      Almost everything needs to be a Plugin
    • 1
      Manual Chunking is a bit buggy

    Sign up to add or upvote consMake informed product decisions

    What is Browserify?

    Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

    What is rollup?

    It is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

    Need advice about which tool to choose?Ask the StackShare community!

    Jobs that mention Browserify and rollup as a desired skillset
    What companies use Browserify?
    What companies use rollup?
    Manage your open source components, licenses, and vulnerabilities
    Learn More

    Sign up to get full access to all the companiesMake informed product decisions

    What tools integrate with Browserify?
    What tools integrate with rollup?

    Sign up to get full access to all the tool integrationsMake informed product decisions

    Blog Posts

    JavaScriptGitGitHub+33
    20
    2141
    What are some alternatives to Browserify and rollup?
    Bower
    Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
    Webpack
    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
    Babel
    Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support.
    RequireJS
    RequireJS loads plain JavaScript files as well as more defined modules. It is optimized for in-browser use, including in a Web Worker, but it can be used in other JavaScript environments, like Rhino and Node. It implements the Asynchronous Module API. Using a modular script loader like RequireJS will improve the speed and quality of your code.
    Parcel
    Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.
    See all alternatives