You can only speculate as to how complex the process was before bundlers. Web developers had a hard effort keeping all of the files and their dependencies current and prepared.
How does a Bundler work?
Let’s examine how these tools for managing dependencies operate. Dependency graph generation and eventual bundling are the two stages of a bundler’s operation.
Mapping a Dependency Graph
A module bundler creates a relationship map of all the served files as its initial step. The name of this procedure is Dependency Resolution. The bundler needs an entry file to accomplish this, ideally your primary file. After that, it analyses this entry file to determine its dependencies.
The dependencies are then traversed to ascertain the dependencies of these dependencies. How tricky! Throughout this process, it gives each file that it encounters a distinct ID. Finally, it extracts every dependency and creates a new dependency graph that displays how each file relates to others.
- It allows the module to create a dependency order, which is necessary for fetching functions when a browser asks for them.
- Since the JS bundler has a good source map of all the files and their dependencies, it avoids naming conflicts.
A bundler delivers static assets that the browser may properly process after taking inputs and traversing its dependencies during the Dependency Resolution phase. The packing stage is the output stage. The bundler will use the dependency graph throughout this process to merge our many code files, inject the necessary function and module that exports the object, and provide the browser with a single executable package that it can properly load.
What are Rollup and Webpack?
Although there are many possibilities, it is simple to get started, and bundling is quick.
The benefits of using Rollup are:-
- Using smaller, self-contained source files makes development easier to handle.
- Unused functions are removed through tree-shaking.
- Production bundles can be delogged and minified.
Webpack also lets you split your codebase into multiple bundles that can be loaded.
The benefits of using Webpack are:-
- It makes your source code shorter.
- It also takes your source code from your application and makes it easy to use in a browser.
Webpack vs. Rollup
These bundlers all developed unique solutions to problems that current technologies couldn’t solve.
Webpack was created to address the issues of code splitting and asset management. It is incredibly adaptable and includes many plugins for any conceivable usage.
On the other side, Rollup developed the concept of writing your code in a standard format and strives to produce extremely short builds through dead code elimination.
I’ll be conducting additional comparisons of these two on the following criteria:
For apps, both Webpack and Rollup want a configuration file. The entry, output, plugin, transformations, and other options are contained in the configuration file. The webpack config file differs slightly from the rollup config file.
Webpack lacks node polyfills for import/export, while Rollup does.
Since Webpack does not accept relative paths but Rollup does, we must use either
Rollup is capable of using an HTML file as its entry point. However, doing so requires the installation of a plugin,
For transformation, Webpack uses loaders for various formats; for instance,
css-loader for CSS files. In its configuration file, we must provide the file type and related loader that will be utilized.
Rollup transforms data using plugins. In the rollup configuration file, the plugin must be specified.
To incorporate tree shaking into Webpack, we must:
- utilize the ES2015 module syntax (i.e., import and export).
- In the package.json file for your project, include a “sideEffects” entry.
- Include a minifier that removes dead code, the
Rollup analyzes the code you are importing and removes any code that isn’t utilized. This enables you to build on top of currently available tools and modules without growing your project’s size or introducing more dependencies.
A plugin named
webpack-dev-server by Webpack offers a straightforward development server with live reload capabilities. We must include this plugin in our project along with a script to launch
package.json and some configuration defining the file to serve when this is executed.
rollup-plugin-serve, which just rebuilds the script anytime we make any changes, is required to establish a development server in rollup. However, installing
rollup-plugin-livereload, which offers live reload capabilities, is required. Both plugins require configuration.
Hot Module Replacement
Without doing a complete reload, Hot Module Replacement (HMR) swaps, adds, or removes modules while an application is in use. This can accelerate development considerably.
One of Webpack’s most beneficial capabilities is Hot Module Replacement. It enables real-time module updates for all types without requiring a complete refresh. The hot mode feature of
webpack-dev-server enables HMR updates before attempting a full page reload.
Rollup doesn’t replace hot modules (HMR).
The most attractive feature of Webpack is its Code Splitting feature. In Webpack, there are three standard methods for dividing up code:
- Configure to manually separate code at entry points.
- Split and deduplicate chunks using the
- Code division using inline function calls within modules is known as dynamic imports.
Rollup included a test feature for code splitting. Rollup’s split chunks are simply normal ES modules that leverage the browser’s integrated module loader without adding any extra complexity. The
experimentalDynamicImport flags in the configuration file must be set to true.
A TIP FROM THE EDITOR: For a third option, do consider Vite, as shown at Building a React Application with Vite.
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.