Technologies Used: React, Favicon, React-Icons
After a certain point, reducing the size of your react website gets more and more challenging. You find yourself in the micro-optimization territory where each KB starts to matter. This is where React-Icons comes into play. I was able to decrease my bundle size about 30KBs without doing any major work at all.
Before React-Icons, we used to import the whole favicon css into our component as below:
import "font-awesome/css/font-awesome.min.css";
const FaviconComponent = () => {
return <p className="fa fa-twitter" />;
};
export default FaviconComponent;
Instead of doing this, you can specify which icons to import using React-Icons. To install the package dependency, run the following command in your terminal:
npm install react-icons --save
This is how the code looks now. You just import the required icon using an import statement, then use it just like you would use a regular component.
import { FaTwitter } from "react-icons/fa";
const FaviconComponent = () => {
return <FaTwitter />;
};
export default FaviconComponent;
If you want to explore which icons are available in the favicon library, you can go and browse node_modules/react-icons/fa/index.js. You will find a bunch of icons there with their respective names. Or there is a more visual guide available in here: https://fontawesome.com/icons
Moral of the story is:
People sent space probes to Pluto with a PS1 processor. You have access to multiples of times faster hardware now. Why would we need to wait more than 5 seconds for a website to load?