Skip to content

fix: do not import css or react JS unless needed #773

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 38 commits into from
Jun 23, 2025
Merged

fix: do not import css or react JS unless needed #773

merged 38 commits into from
Jun 23, 2025

Conversation

SgtPooki
Copy link
Member

@SgtPooki SgtPooki commented Jun 23, 2025 •
edited
Loading

Title

fix: do not import css unless needed

Description

Dynamically import CSS and app.tsx JS file only when we need to render the UI instead of on every page load.

For content-addressed data requests (the whole point of the service worker gateway), we don't need to load the CSS or react JS.

Related #759

Notes & open questions

The current CSS file is ~90kb, and an extra network request is made for every page load (2 non-cached requests when hitting a subdomain directly). Removing this should help with the initial load time.

I’ve got CSS and js for react/ui code importing dynamically now and the initial bundle size has been reduced (after redirect-config bounce changes in #759) from 255kB to 39kB for the initial javascript.. and removes 90~kb of CSS on index.html page loads.

Basically this results in a significant first-load reduction from ~32s using 3g throttling to 19s in chrome. (using “finish” time in chrome dev tools.. i.e. from the time all the network requests started (hey, gimme the content of this URL) to redirect+style+content loading + rendering being done)

without the throttling, the reduction in loadtime is improved but almost insignificant. (load time 857ms, DOMContentLoaded 476ms) — not much difference from #759

Change checklist

  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation if necessary (this includes comments as well)
  • I have added tests that prove my fix is effective or that my feature works

SgtPooki added 30 commits June 17, 2025 14:02
@SgtPooki
feat: use lightweight config iframe
d0c89be
@SgtPooki
chore: lint cleanup and remove old iframe page
3bbde2f
@SgtPooki
fix: getSubdomainParts returns parent domain with port
ab5e004
@SgtPooki
fix: getSubdomainParts returns consistent parentDomain
64f4adc
@SgtPooki
fix: subdomains can load global config
68cf0fe
@SgtPooki
chore: fix lint
c78f63d
@SgtPooki
fix: most e2e tests are passing
3fd4f08
@SgtPooki
test: all tests passing
311e73f
@SgtPooki
fix: use dynamic imports in index.tsx
aeeb769
@SgtPooki
chore: cleanup. all tests are passing
f142c8f
@SgtPooki
chore: cleanup code and minor fixes
e3d5570
@SgtPooki
test: add tests for new first-hit helpers
dc352a3
@SgtPooki
Merge branch 'main' into fix/config-reload-page
e9d1470
@SgtPooki
Merge branch 'main' into fix/config-reload-page
680e204
@SgtPooki
fix: playwright can test remote urls
8efa710
@SgtPooki
fix: build allows for not including js or css file
8513699
@SgtPooki
chore: split src/app.tsx into separate entry
d1fa674
@SgtPooki
Revert "chore: split src/app.tsx into separate entry"
d0e2b88 
This reverts commit d1fa674.
@SgtPooki
fix: checkSubdomainSupport can return a response
f408194
@SgtPooki
chore: remove redirects-interstitial page
874d9db
@SgtPooki
fix: some test fixes after removing interstitial page
0888548
@SgtPooki
Merge branch 'main' into fix/config-reload-page
3ef1725
@SgtPooki
chore: fix lint
f050da8
@SgtPooki
Merge branch 'main' into fix/config-reload-page
2b48cd3
@SgtPooki
fix: guarantee redirect from root domain for config loading
4d223de
@SgtPooki
fix: timestamp checking is accurate
82075e3
@SgtPooki
chore: lint fix
fe59843
@SgtPooki
chore: remove old iframe code
324320f
@SgtPooki
fix: various fixes and additional tests
3445151
@SgtPooki
fix: config timestamp is broad enough for 3g loading
b5554ae
@SgtPooki SgtPooki changed the base branch from main to fix/config-reload-page June 23, 2025 17:34
SgtPooki
SgtPooki commented Jun 23, 2025
View reviewed changes
Copy link
Member Author

@SgtPooki SgtPooki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

self review. tested locally and works fine.

no FOUC, but it's also technically a race condition ¯_(ツ)_/¯

@SgtPooki SgtPooki changed the title fix: do not import css unless needed fix: do not import css or react JS unless needed Jun 23, 2025
SgtPooki
SgtPooki commented Jun 23, 2025
View reviewed changes
Copy link
Member Author

@SgtPooki SgtPooki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

self review after adding dynamic JS loading and splitting react/ui JS out from initial page hits

@SgtPooki SgtPooki marked this pull request as ready for review June 23, 2025 19:08
@SgtPooki SgtPooki mentioned this pull request Jun 23, 2025
Merged
Base automatically changed from fix/config-reload-page to main June 23, 2025 19:14
@SgtPooki SgtPooki merged commit 78d4d45 into main Jun 23, 2025
18 checks passed
@SgtPooki SgtPooki deleted the fix/config-reload-page-dynamic-css branch June 23, 2025 19:41
SgtPooki added a commit that referenced this pull request Jun 23, 2025
@SgtPooki
Revert "fix: do not import css or react JS unless needed (#773)"
ac5ae55 
This reverts commit 78d4d45.

We need to open back up #773 and fix the UI when loading from cloudflare.
@SgtPooki SgtPooki mentioned this pull request Jun 23, 2025
Merged
SgtPooki added a commit that referenced this pull request Jun 23, 2025
@SgtPooki
Revert "fix: do not import css or react JS unless needed (#773)" (#775)
04345ad 
This reverts commit 78d4d45.

We need to open back up #773 and fix the UI when loading from cloudflare.
@SgtPooki SgtPooki mentioned this pull request Jun 23, 2025
Merged
SgtPooki added a commit that referenced this pull request Jun 23, 2025
@SgtPooki
fix: cloudflare redirect not being handled properly (#776)
35a288b 
* Revert "fix: do not import css or react JS unless needed (#773)"

This reverts commit 78d4d45.

We need to open back up #773 and fix the UI when loading from cloudflare.

* fix: cloudflare redirect works
SgtPooki added a commit that referenced this pull request Jun 23, 2025
@SgtPooki
Revert "Revert "fix: do not import css or react JS unless needed (#773)…
ae4b405 
…" (#775)"

This reverts commit 04345ad.
This was referenced Jun 23, 2025
Merged
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@SgtPooki