Sveltekit First Request

Repository for understanding what happens in the very first request, to a SvelteKit app.

I've added a handle, the logs how long it takes resolve(event) to complete. See src/hooks.server.js

In src/routes/+page.svelte you'll see the snippet below:

<script>
    // import { isToday } from 'date-fns';
    // console.log(isToday(new Date()));
</script>

<h1>Welcome to SvelteKit</h1>
<p>
  Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
  documentation
</p>

If go ahead and pnpm run dev, open your browser at http://localhost:5173/, refresh a couple of times. The console should something like the following:

resolve duration: 54 ms
resolve duration: 13 ms
resolve duration: 2 ms

Now, stop the dev server, uncomment the 2 lines in src/routes/+page.svelte, redo the above steps. You'll now see a significantly increased time, for the first request to complete:

resolve duration: 682 ms
resolve duration: 2 ms
resolve duration: 5 ms

Building the app, and running a preview yields the following:

With NO imports

resolve duration: 12 ms
resolve duration: 1 ms
resolve duration: 3 ms

With imports

resolve duration: 607 ms
resolve duration: 1 ms
resolve duration: 3 ms

Trying out in containers

Try building the application in a docker image, and run it in a "constrained" environment:

docker compose -f compose.yml build
docker compose -f compose.yml up