feat: code split & dynamic imports #188
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 tasks
…js' into fix/dynamic-imported-ui-components
3 tasks
SgtPooki
commented
Apr 10, 2024
Comment on lines
+8
to
+10
| <Suspense fallback={<div>Loading...</div>}> | ||
| {currentRoute?.component != null && <currentRoute.component />} | ||
| </Suspense> |
There was a problem hiding this comment.
we could avoid any potential "not prod ready" issues with preact's Suspense by doing a simple useEffect wrapper of the async operation
| export const ConfigProvider = ({ children, expanded = isLoadedInIframe }: { children: JSX.Element[] | JSX.Element, expanded?: boolean }): JSX.Element => { | ||
| const [isConfigExpanded, setConfigExpanded] = useState(expanded) | ||
| export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Element, expanded?: boolean }): JSX.Element => { | ||
| const [isConfigExpanded, setConfigExpanded] = useState(isConfigPage(window.location.hash)) |
There was a problem hiding this comment.
could be updated to loaded dynamically but I don't think it would give us much for the effort
| gotoPage(route?: string): void | ||
| }>({ currentRoute: undefined, gotoPage: () => {} }) | ||
|
|
||
| export const RouterProvider = ({ children, routes }: { children: React.ReactNode, routes: Route[] }): JSX.Element => { |
There was a problem hiding this comment.
very basic hash-router implementation. I looked around for some and most were 200kb and unmaintained, or very large. All required some intimate knowledge or specific finagling for things we needed.
lmk if there's something I missed.
Comment on lines
+2
to
+3
| import Form from '../components/Form.jsx' | ||
| import Header from '../components/Header.jsx' |
There was a problem hiding this comment.
TODO: rename these to snake-case, form.jsx and header.jsx
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Title
feat: code split & dynamic imports
Description
Implements a version of #93 (comment).
Fixes #93
Fixes #147
FYI that this conflicts slightly with #182 and differences need to be resolved (should be a minor change)that PR was merged into this oneSummary of changes:
Notes & open questions
NOTE: This PR is in draft because serving different JS bundles based on subdomain is a little tricky, but I will look into that now that I have basic code splitting and dynamic loading working with decent pure routing functions.
Details about assets
What's pulled on first hit
The below are loaded in firefox using a server ran with:
> npx http-server -p 3335 distmain domain
http://localhost:333514 requests
1.11 MB / 1.04 MB transferred
Finish: 113 ms
DOMContentLoaded: 12 ms
load: 56 ms
main domain
http://localhost:3335/#/ipfs-sw-config2 requests
35.47 kB / 36.11 kB transferred
Finish: 14 ms
subdomain
http://specs-ipfs-tech.ipns.localhost:333527 requests
2.13 MB / 1.99 MB transferred
Finish: 233 ms
DOMContentLoaded: 16 ms
load: 72 ms
Note that the config page in the iframe makes additional requests for the same assets, and I have cache disabled.
Change checklist