Let’s Make Our Bundle Size Even Smaller

If you ever developed a SPA (Single-Page-Application), where ever it was on Angular, React, Vue or something else, You probably noticed that all the hard work you’ve put into your app goes to one minified .js file and one .css file. Those files contain all your dependencies and functionalities of the app.

sometimes, those files could become quite big and increase the loading time of your app this something I stumbled upon during my work.

With Webpack for example, the files are made after “Tree-shaking “ and Uglify.

Tree-shaking is the process of removing all the unused function and variables from the code, which makes our app a lot smaller (basically we only use a small part of our dependencies and a large part of the code isn’t even being called).

Uglify (as it sounds like) is the process of turning your beautiful javascript code into an ugly minified code that is absolutely unreadable, why do we need that? because a variable that changes its’ name from “isUserConfirmed” to “x” will take a lot less memory, also all the tabs and spaces are being removed.

In this example, I used React, but making the bundle size smaller is basically the same thing on all frameworks. so I used create-react-app which is a simple tool for starting with react framework without the need to configure webpack yourself. This is the result I’ve got after running npm run build on my project

First minified JS file 2.7MB

The file size looks quite large, so let’s analyze it and see what’s taking so much space. source-map-explorer is an npm package that analyses bundled JS file and tells you what the file is made of (dependencies and sizes).

npm install -g source-map-explorer

source-map-explorer bundle.min.js bundle.min.js.map

And here is the result:

As I mentioned before, the node modules are taking most of the file’s size, and the first two things that got my attention from the analyses is that react-icons and emoji-mart are pretty heavy (probably it’s because they used a lot of media assets).

from a quick search in the code I’ve found this line:

import { FaUpload } from 'react-icons’;

React-icons is a simple UI module for importing generic icons to the app.

This kind of import in this specific case will import all the icons to our app which doesn’t make sense because I only wanted to use one icon, from a quick lookup in the documentation I ended up with this kind of import.

import FaUpload from 'react-icons/lib/fa/upload'

Since react-icons is divided into subfolders it allows us to import only the required piece of code. There are other examples of packages that use the same method such as “lodash” which is one of the most popular javascript libraries for utility functions.

That did the trick, our bundle size got smaller with no effort at all.

Our second problem was the emoji-mart dependency. I won’t go into too many details because that example is too specific but I managed to reduce the emoji-mart package by just replacing it with something smaller that answered my application’s needs. If you have a large package out there, there must be a discussion about it in the repository so It’s worth to take a look and even contribute a solution for it.

Now let’s talk about gzip. gzip is a file format used for compressing data. It’s been supported on almost any browser which results in easy implementation on the client side using “Content-Encoding” header.

This way the client gets the compressed data and decompress it on run-time. I’ve used gzip-all package for generating the compressed versions of the minified javascript & CSS files.

We managed to get our file size really small, we can now change the file type back to .js and send it to the world and reduce the time it takes for the app to be loaded.

Conclusion

It’s a good practice to keep in mind that at the end there is a user who waits for things to be loaded from the internet, especially on low connections speeds.

An important thing is to keep track of your dependencies and consider developing your own implementation of some things instead of relying on big packages that you may not need. and at the end compress the data to be as small as possible.