SaimirKapaj / gatsby-markdown-typescript-personal-website

Gatsby Personal/Resume Website
https://gatsby-markdown-typescript-personal-website.netlify.app/
MIT License
54 stars 17 forks source link

Improve bundle size #1

Open jkettmann opened 3 years ago

jkettmann commented 3 years ago

First of all, thanks for this great starter. I enjoy it a lot and it helped me rewrite my blog quickly. One thing I realized when analyzing the build bundle was this.

image

This is already after I did some changes to the repo. So it won't be the same for you. But as you can see fontawesome takes up a huge chunk of the bundle size. Especially the brands package. Afaik there are only a couple of icons actually used so it should be easy to replace them with single icons (e.g. svgs).

SaimirKapaj commented 3 years ago

@jkettmann thanks for the comment. The font-awesome package is just used for the starter. Personally, I don't like this approach. I prefer to write an "Icon" component where I define the list of SVG icons used. Like in this project https://github.com/SaimirKapaj/next-swr-moviedb/blob/master/components/Icon/Icon.tsx