[Help/Documentation] How is three/cubed & sveltekit/vite/ssr supposed to be configured to benefit the most from treeshaking/codespilting/minification ?

[theword]

Hi,

To Anyone Who Will Listen:

For a sveltekit project with a animated homepage with three.js.

With a standard svelte.config.js:
The pnpm run build reads app.js is 448.25 KiB.

However, this warning appears:

> .svelte-kit/output/server/app.js:23:7: warning: Ignoring this import because "node_modules/.pnpm/[email protected]/node_modules/three/build/three.js" was marked as having no side effects
   23 │ import "three";
      ╵        ~~~~~~~
  node_modules/three/package.json:11:2: note: "sideEffects" is false in the enclosing "package.json" file
   11 │   "sideEffects": false,

Then when the configuration changes to be the same as the cubed sample project in svelte.config.js:

ssr: {
     noExternal: ['three'],
},

This gets rid of the warning! But now the project size for the total app.js becomes 1389.12 KiB.

Additionally, if you try to use a package like three-minifier to tree shake three.js, it doesn't work with Vite. Vite should automatically optimize the three/cubed packages? This seems to be implied from cubed docs on React3 Fiber My impression is that this code from src:

optimizeDeps: {exclude: ['three']} stops Vite from optimizing any part of three.

However, both configurations seem to build. Although I don't know exactly what is happening in SSR. The Vite documentation says it "externalized for SSR".
I'm guessing we don't want SSR with three.

[babichjacob]

The latest version of Vite (2.7) has been released and is being used by SvelteKit. You don't need to exclude three from optimization anymore.

In a playground I made, the vendor file now builds to 550.11 KiB (and adding / removing imports changes it accordingly which implies tree-shaking is working I think).