I’ve been trying to Tree Shake my vite project. Currently using this for my configuration file
rollupOptions: {
treeshake: {
preset: "smallest",
moduleSideEffects: false,
propertyReadSideEffects: false,
unknownGlobalSideEffects: false,
},
output: {
manualChunks(id) {
if (id.includes("node_modules")) {
if (id.includes("gsap")) return "gsap";
if (id.includes("three/examples/jsm/controls/OrbitControls"))
return "orbit-controls";
if (id.includes("three/examples/jsm/loaders/")) return "loaders";
if (id.includes("three/addons/loaders/GLTFLoader"))
return "gltf-loader";
if (id.includes("three/src/") || id.includes("three/build/"))
return "three-core";
return "vendor";
}
},
},
},
And still getting about 52% of completely unused code under Coverage Section on DevTools
All of my imports look like this
import { MathUtils } from "three/src/math/MathUtils.js";
import { AmbientLight } from "three/src/lights/AmbientLight.js";
import { PointLight } from "three/src/lights/PointLight.js";
import { RectAreaLight } from "three/src/lights/RectAreaLight.js";
import { Group } from "three/src/objects/Group.js";
import { Mesh } from "three/src/objects/Mesh.js";
import { PlaneGeometry } from "three/src/geometries/PlaneGeometry.js";
What is the state of tree shaking in THREE.JS and are there any tips for more efficient tree shaking?