Skip to content
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

Add module preloading at idle time #1011

Merged
merged 7 commits into from
Nov 17, 2024
Merged

Add module preloading at idle time #1011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a89ad85
module preload
thejackshelton Nov 17, 2024
768eff7
low fetch priority
thejackshelton Nov 17, 2024
f5f72f0
remove font preload
thejackshelton Nov 17, 2024
4b20cf6
remove sw and prefetch sw
thejackshelton Nov 17, 2024
a7da2e0
no log
thejackshelton Nov 17, 2024
b2da7d0
remove inter from component tests
thejackshelton Nov 17, 2024
fc42e68
remove sw from component tests
thejackshelton Nov 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 1 addition & 9 deletions apps/component-tests/src/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import {
component$, useStyles$,
PrefetchGraph,
PrefetchServiceWorker
} from '@builder.io/qwik';
import { component$, useStyles$ } from '@builder.io/qwik';
import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';

import { RouterHead } from './components/router-head/router-head';
import globalStyles from './global.css?inline';

import { ThemeProvider } from '@qwik-ui/themes';

import '@fontsource-variable/inter';
import {
ThemeBaseColors,
ThemeBorderRadiuses,
Expand All @@ -29,7 +24,6 @@ export default component$(() => {
*/
useStyles$(globalStyles);


return (
<QwikCityProvider>
<head>
Expand All @@ -38,8 +32,6 @@ export default component$(() => {
<RouterHead />
</head>
<body lang="en">
<PrefetchGraph />
<PrefetchServiceWorker />
<ThemeProvider
attribute="class"
enableSystem={false}
Expand Down
66 changes: 66 additions & 0 deletions apps/website/src/components/module-preload/module-preload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { component$, sync$, useOnWindow } from '@builder.io/qwik';

export const ModulePreload = component$(() => {
useOnWindow(
'load',
sync$(async () => {
// for safari support
if (!window.requestIdleCallback) {
window.requestIdleCallback = function (
callback: IdleRequestCallback,
options?: IdleRequestOptions,
): number {
const opts = options || {};
const relaxation = 1;
const timeout = opts.timeout || relaxation;
const start = performance.now();
return setTimeout(function () {
callback({
get didTimeout() {
return opts.timeout
? false
: performance.now() - start - relaxation > timeout;
},
timeRemaining: function () {
return Math.max(0, relaxation + (performance.now() - start));
},
});
}, relaxation) as unknown as number;
};
}

const startPreloading = async () => {
const prefetchScript = document.querySelector(
'script[q\\:type="prefetch-bundles"]',
);
if (!prefetchScript?.textContent) return;

const qChunks = new Set<string>();

// Check prefetch bundles
const content = prefetchScript.textContent;
const match = content.match(/\["prefetch","\/build\/","(.*?)"\]/);
if (match && match[1]) {
match[1].split('","').forEach((chunk) => {
if (chunk.startsWith('q-')) {
qChunks.add(chunk);
}
});
}

qChunks.forEach((chunk) => {
const link = document.createElement('link');
link.rel = 'modulepreload';
link.as = 'script';
link.href = '/' + 'build/' + chunk;
link.fetchPriority = 'low';
document.head.appendChild(link);
});
};

await requestIdleCallback(await startPreloading);
}),
);

return <></>;
});
30 changes: 19 additions & 11 deletions apps/website/src/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import {
component$,
useContextProvider,
useStore,
useStyles$,
PrefetchGraph,
PrefetchServiceWorker,
} from '@builder.io/qwik';
import { component$, useContextProvider, useStore, useStyles$ } from '@builder.io/qwik';
import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';

import { APP_STATE_CONTEXT_ID } from './_state/app-state-context-id';
Expand All @@ -15,7 +8,6 @@ import globalStyles from './global.css?inline';

import { ThemeProvider } from '@qwik-ui/themes';

import '@fontsource-variable/inter';
import {
ThemeBaseColors,
ThemeBorderRadiuses,
Expand All @@ -24,6 +16,7 @@ import {
ThemePrimaryColors,
ThemeStyles,
} from '@qwik-ui/utils';
import { ModulePreload } from './components/module-preload/module-preload';

export default component$(() => {
/**
Expand All @@ -43,6 +36,21 @@ export default component$(() => {

useContextProvider(APP_STATE_CONTEXT_ID, appState);

const unregisterPrefetchServiceWorkers = `
;(function () {
navigator.serviceWorker?.getRegistrations().then((regs) => {
for (const reg of regs) {
if (
reg.active?.scriptURL.includes('service-worker.js') ||
reg.active?.scriptURL.includes('qwik-prefetch-service-worker.js')
) {
reg.unregister();
}
}
});
})();
`;

return (
<QwikCityProvider>
<head>
Expand All @@ -51,8 +59,8 @@ export default component$(() => {
<RouterHead />
</head>
<body lang="en">
<PrefetchGraph />
<PrefetchServiceWorker />
<script dangerouslySetInnerHTML={unregisterPrefetchServiceWorkers} />
<ModulePreload />
<ThemeProvider
attribute="class"
enableSystem={false}
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@
"@clack/prompts": "^0.7.0",
"@floating-ui/core": "^1.6.2",
"@floating-ui/dom": "^1.6.5",
"@fontsource-variable/inter": "^5.0.18",
"@img/sharp-linux-x64": "^0.33.4",
"@k11r/nx-cloudflare-wrangler": "3.0.0-feat-sst-upgrade.1",
"@modular-forms/qwik": "^0.24.0",
Expand Down
16 changes: 1 addition & 15 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading