CSS bundle is huge
2color opened this issue · 2 comments
Problem
One of the CSS files that is loaded in the bundle is pretty big (~12MiB and 9MiB gzipped)
Specifically it's https://inbrowser.link/ipfs-sw-138-66da405c07a0317cdbbf.css
A look at the build reveals that this is coming from the ipfs-css module which we import: https://github.com/ipfs/service-worker-gateway/actions/runs/9167097012/job/25203686469#step:4:98
The actual css file is much smaller, https://github.com/ipfs-shipyard/ipfs-css/blob/main/ipfs.css is around 18.5 kb, but because the imported typefaces are inlined as base64, it makes the css bundle explode.
The main problem is that most of the bundled typefaces are not even used by the frontend. Moreover, we load three formats for each typeface (woff, woff2, otf)
Possible solutions:
- Add purgecss to purge any unused css https://purgecss.com/plugins/webpack.html
- Remove older typeface formats from the bundle, i.e. woff and otf. The only impact this will have is visual — but who cares. People are trying to load a CID/Dapps. This won't be a major regression.
Another data point: according to the Chrome Coverage tool, most of the CSS isn't used: https://developer.chrome.com/docs/devtools/coverage
Reopening this until we address excluding the fonts from the build altogether.