Description
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.