Let’s Make Our Bundle Size Even Smaller
source link: https://www.tuicool.com/articles/hit/aMbm6fV
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
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.
Let’s Make Our Bundle Size Even Smaller was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Recommend
-
5
Introducing Zero-Bundle-Size React Server Components2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components...
-
5
How does browser support impact JavaScript bundle size? 13 Nov 2019 Older browsers don’t support many of the modern features that have been added to JavaScript, such as the...
-
2
The dreaded loading spinner The two key metrics in determining whether users will stay on your site is the time it takes to load the page and the time it takes to interact with it. The first is First Contentful Paint
-
3
Filed under: Alienware X14 review: fast and thin, but far from perfect This size reduction comes with a mix of good and slight...
-
4
Technical | 2022-03-13 A COMPLETE guide on how to make Docker...
-
3
Smaller chips, bigger packages, even bigger headaches WelcomeYour IET account...
-
4
[JavaScript] Font Size Larger/Smaller February 27, 2016 Make font size o...
-
11
[Vue.js] Font Size Larger or Smaller May 18, 2018 See demo first. Click th...
-
1
Not Reactjs, not a framework or the servers, or API , nor the internet is the reason behind it. Under the Hood The story begins way back exactly one year ago. When I was covering stories...
-
2
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK