Skip to content

SvelteKit loads CSS of dynamically imported components upfront when the page loads #13546

Closed
@onesinghashish

Description

@onesinghashish

Describe the bug

We are facing performance issue in our web app which is used inside mobile webview environment. FCP latency is high due to large amount of render blocking css getting loaded when the page loads. This is happening because the css of even the components which are supposed to get dynamically loaded after the initial page load is getting shipped upfront and I haven't found any configuration which will help me avoid this.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-x6u4xeph

Here, I am dynamically importing a component called DynamicLoaded inside onMount of root page.svelte.

Expectation: css of DynamicLoaded should load along with js chunk of it lazily.
Actual: css of DynamicLoaded component gets loaded upfront.

Logs

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^4.0.0 => 4.0.0 
    @sveltejs/kit: ^2.16.0 => 2.18.0 
    @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.3 
    svelte: ^5.0.0 => 5.22.1 
    vite: ^6.0.0 => 6.2.0

Severity

serious, but I can work around it

Additional Information

I was able to work around it by having a local copy of the svelte kit npm module and changing the
node_modules/@sveltejs/kit/src/exports/vite/build/build_server.js file. However, this approach is not maintainable in the long run.

Changed the third argument from true to false while calling find_deps function gives the desired result.
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions