Rollup Visualizer

#JavaScript#TypeScript

A smaller package size can offer a range of benefits in web development, from improved performance to reduced development and maintenance costs.

One of the most significant benefits of a smaller package size is improved performance. Smaller packages have less code to load and execute, which means that web pages can load faster and run more smoothly. This can be particularly important for mobile devices and users with slow internet connections, who may be more likely to abandon a site that takes too long to load.

So how can we archive a smaller package? Let's roll it up.

Rollup

We use a module bundler. And rollup just like WebPack is this kind of software that has become increasingly essential in web development, especially with the rise of modern JavaScript frameworks and libraries like react or angular.

One of the most significant benefits of rollup we use is that it can significantly improve the performance of web applications by removing dead code and minimizing the size of the final bundle. This means that the resulting JavaScript file is smaller and faster to load.

Rollup also helps to keep code organized and modular, which is crucial for large web applications. By using rollup, we can split our code into smaller modules that can be imported and exported as needed. This makes it easier to manage code dependencies and ensures that changes to one module don't affect the entire application.

But there is much more. Rollup also offers a range of rollup-plugins that can be used to optimize code for different scenarios. For example, there are plugins for removing debugging statements, replacing strings, and import images. And there is even a plugin for visualizing what makes your bundle bloated.

Rollup Plugin Visualizer

We just used such a visualizing plugin and it is quite neat. It's called rollup-visualizer and helps to visualize all parts a bundle is made of in a treemap. Its like the bird view on your code and its yes its helpful.

Example component library

In our scenario, we tested a library with this plugin. The library is used in a react frontend application where every kilobyte matters.

Let us look at the picture the plugin generated:

The result shows us:

• a significant amount is used for SVGs. Further investigation shows there are several duplicated SVGs in the code.
• we bundle example data that is never used in the frontend.
• we use a node module for vimeo player that is not used yet in the frontend, and it really takes some space.

We removed the duplicated SVGs, cleaned up the exampleData from our code (fixed some bugs with that along) and saved 5% of the size at the end. Thats quite impressive.

Try it yourself!

Installation

npm install --save-dev rollup-plugin-visualizer

Usage

Open your rollup.config.js and add the plugin to the lifecycle. If you put open: true, it will directly open the result in your browser. Its for analyzing the code so we will not commit this file.

...
import { visualizer } from "rollup-plugin-visualizer";
...
module.exports = {
  plugins: [
    ...
    
    // put it the last one
    visualizer({
      open: true
    }),
  ],
};