Skip to content

Minimize bundle size and further reduce HTTP requests#277

Merged
runemadsen merged 4 commits intomainfrom
minize-bundle-size
Oct 13, 2021
Merged

Minimize bundle size and further reduce HTTP requests#277
runemadsen merged 4 commits intomainfrom
minize-bundle-size

Conversation

@runemadsen
Copy link
Member

This PR does two things:

Minize bundle size

  • Remove inline CSS It minimizes the bundle size by removing the inline CSS on all pages, relying only on the external CSS files. In theory, this makes the site a bit slower to render, but it really doesn't seem like a problem from my tests. The change results in the /reference folder going from 100MB to 30MB in uncompressed size 👀 .
  • Remove p5 as dependency. The p5.js library is 1.8MB in uncompressed size, which made it the by far largest JS to load on the website. This PR removes the p5 import in favor of using CDNJS. We need to revisit this for the offline version since the interactive examples won't work without an internet connection, but it will make a big difference with Cloudfront since it's the 3rd most loaded JS file in terms of size.
  • Remove luxonas dependency. We were relying on luxon and its 300kb for a single line of code. This removes the lib to rely on toLocaleString instead.

Further reduce HTTP requests

  • Adding to the work already done, this PR reduces the number of HTTP requests by minimizing the use of useStatucQuery in two main components: HeadMatter and Layout.

@runemadsen runemadsen merged commit 6e08a22 into main Oct 13, 2021
@runemadsen runemadsen deleted the minize-bundle-size branch October 13, 2021 09:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant