Rich-Harris/svelte-cubed

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

theword opened this issue · 1 comments

theword commented

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/three@0.129.0/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 commented

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

  • 👍1