Lazy load rarely used pages#338
Conversation
| <FeedByCategoriesPage page={$currentPage} /> | ||
| {:else if $currentPage.route === 'about'} | ||
| <AboutPage page={$currentPage} /> | ||
| {#await import('../pages/about.svelte') then {default: AboutPage}} |
There was a problem hiding this comment.
I think we forgot about some loader during the page loading.
| @@ -88,9 +87,13 @@ | |||
There was a problem hiding this comment.
As I mention in the issue it is better strategy to join pages in the bundles according to user behavior.
I think we can bundle all settings (expect import and export) into the single bundle.
| "!dist/assets/playpen-sans-*.woff2", | ||
| "!dist/assets/*-{italic,math,latin-ext}-*.woff2" | ||
| "!dist/assets/*-{italic,math,latin-ext}-*.woff2", | ||
| "!dist/assets/{export,import,about}-*.js" |
There was a problem hiding this comment.
Maybe by moving to custom bundles we can add some custom prefix?
| "name": "Core scripts to execute", | ||
| "path": "dist/assets/index-*.js", | ||
| "brotli": false, | ||
| "limit": "310 KB" |
There was a problem hiding this comment.
Let’s update core scripts.
But as I see button-* and core-* was moved out. Do we need this bundle to show home page? If yes, we need to update Core scripts to execute metrics (and it is better to have some automation to avoid manually picking bundles).
There was a problem hiding this comment.
I've updated the script according to the chunks
| @@ -0,0 +1,15 @@ | |||
| <script lang="ts"> | |||
There was a problem hiding this comment.
Pages folder is not beautiful page right now. JS bundle splitting is a simple feature which we should not think about, it should not force us to change architecture and project stricture.
| <AboutPage page={$currentPage} /> | ||
| {:else if $currentPage.route === 'cloud'} | ||
| <CloudPage page={$currentPage} /> | ||
| {:else if $currentPage.route === 'about' || $currentPage.route === 'interface' || $currentPage.route === 'cloud'} |
There was a problem hiding this comment.
3 pages moved to JS chunk is still almost nothing. We need solid and finished solution for all pages.
You need to think about good strategy first, do not rush.
|
I have thought about how to keep the feature out of developers’ concerns and make it work automatically, but I couldn’t come up with a solution. Either we need to somehow combine pages into the desired chunks in the code or make all pages async and combine them into chunks via Vite’s |
|
The whole task is about finding the right way to implement. Let’s move task back to waiting list (maybe new API will be introduced) |
|
To introduce the new API I need clearer requirements about what the final result should look like. The requirements now quite contradict each other.
As we do not use a framework that gets the work done for us, we should at least think about code splitting in the |
|
I told about Vite API. |
|
Could you please point me to where you mentioned the Vite API? I couldn’t find it. Also, do you consider this solution suitable? |
2 participants
Fixes #38
I added lazy loading of the about, export, and import pages.
Motivation
To make the size of the loading JS smaller.