Tree Shaking Three.js

Questions
,
56

Ok, tested with this simple Svelte-App (three 116.1):

<script>
    import {onMount} from 'svelte';
    import {WebGLRenderer, Scene} from "../node_modules/three/src/Three";

    let scene;
    let renderer;
    let c;

    onMount(() => {
        scene = new Scene();
        renderer = new WebGLRenderer({canvas: c});
    });

</script>

<style></style>

<canvas bind:this={c}></canvas>

Scene + WebGLRenderer:

722 K unminified / uncompressed on disk
379 K minified (terser) / uncompressed on disk

Chrome DevTools Network Tab:
95.8 K transferred over network, resource size 388 K

WebGLRenderer only
(same as Scene + WebGLRenderer as WebGLRenderer is importing ‘Scene’):

722 K unminified / uncompressed on disk
379 K minified (terser) / uncompressed on disk

Chrome DevTools Network Tab:
95.8 K transferred over network, resource size 388 K

Scene only

99 K unminified / uncompressed on disk
44 K minified (terser) / uncompressed on disk

Chrome DevTools Network Tab:
13.5 K transferred over network, resource size 45.2 K

2 Likes