Tree Shaking Three.js

Questions
,
65

cool. :sunglasses: can’t believe I didn’t use the visualizer yet. :man_facepalming:

I modified our simple svelte example a bit:

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

    let s;
    let cam;
    let r;
    let m;
    let c;

    onMount(() => {
        r = new WebGLRenderer({canvas: c});
        m = new MeshStandardMaterial();
        s = new Scene();
        cam = new Camera();

        s.add(cam);
    });

</script>

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

here the visualization:

bundle_test_stats
bundle_test_stats1682×1072 131 KB

the nice colored squares on the right are all ShaderChunks imported by ShaderChunk.js, alltogether roundabout 122 KB, means 18.6% of all three related imports.

1 Like