Reducing bundle-size

Threejs is quite heavy and tree-shaking doesn't yet yield the results you would hope for atm. But you can always create your own export-file and alias "three" towards it. This way you can reduce it to 80-50kb, or perhaps less, depending on what you need.

three-exports.js

Copy
// Only export the things that are actually needed, cut out everything else
export { WebGLRenderer } from "three/src/renderers/WebGLRenderer.js";
export { ShaderLib } from "three/src/renderers/shaders/ShaderLib.js";
export { UniformsLib } from "three/src/renderers/shaders/UniformsLib.js";
export { UniformsUtils } from "three/src/renderers/shaders/UniformsUtils.js";
export { ShaderChunk } from "three/src/renderers/shaders/ShaderChunk.js";
export { Scene } from "three/src/scenes/Scene.js";
export { Mesh } from "three/src/objects/Mesh.js";
export { LineSegments } from "three/src/objects/LineSegments.js";
export { Line } from "three/src/objects/Line.js";
export { CubeTexture } from "three/src/textures/CubeTexture.js";
export { CanvasTexture } from "three/src/textures/CanvasTexture.js";
export { Group } from "three/src/objects/Group.js";
export {
  SphereGeometry,
  SphereBufferGeometry,
} from "three/src/geometries/SphereGeometry.js";
export {
  PlaneGeometry,
  PlaneBufferGeometry,
} from "three/src/geometries/PlaneGeometry.js";
export {
  BoxGeometry,
  BoxBufferGeometry,
} from "three/src/geometries/BoxGeometry.js";
export {
  ConeGeometry,
  ConeBufferGeometry,
} from "three/src/geometries/ConeGeometry.js";
export {
  CylinderGeometry,
  CylinderBufferGeometry,
} from "three/src/geometries/CylinderGeometry.js";
export {
  CircleGeometry,
  CircleBufferGeometry,
} from "three/src/geometries/CircleGeometry.js";
export {
  RingGeometry,
  RingBufferGeometry,
} from "three/src/geometries/RingGeometry.js";
export { EdgesGeometry } from "three/src/geometries/EdgesGeometry.js";
export { Material } from "three/src/materials/Material.js";
export { MeshPhongMaterial } from "three/src/materials/MeshPhongMaterial.js";
export { MeshPhysicalMaterial } from "three/src/materials/MeshPhysicalMaterial.js";
export { MeshBasicMaterial } from "three/src/materials/MeshBasicMaterial.js";
export { LineDashedMaterial } from "three/src/materials/LineDashedMaterial.js";
export { SpriteMaterial } from "three/src/materials/SpriteMaterial.js";
export { LineBasicMaterial } from "three/src/materials/LineBasicMaterial.js";
export { TextureLoader } from "three/src/loaders/TextureLoader.js";
export { Texture } from "three/src/textures/Texture.js";
export { Sprite } from "three/src/objects/Sprite.js";
export { SpotLightShadow } from "three/src/lights/SpotLightShadow.js";
export { SpotLight } from "three/src/lights/SpotLight.js";
export { SpotLightHelper } from "three/src/helpers/SpotLightHelper.js";
export { CameraHelper } from "three/src/helpers/CameraHelper.js";
export { PointLight } from "three/src/lights/PointLight.js";
export { DirectionalLight } from "three/src/lights/DirectionalLight.js";
export { AmbientLight } from "three/src/lights/AmbientLight.js";
export { LightShadow } from "three/src/lights/LightShadow.js";
export { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera.js";
export { OrthographicCamera } from "three/src/cameras/OrthographicCamera.js";
export { BufferGeometry } from "three/src/core/BufferGeometry.js";
export { Geometry } from "three/src/core/Geometry.js";
export * from "three/src/core/BufferAttribute.js";
export { Face3 } from "three/src/core/Face3.js";
export { Object3D } from "three/src/core/Object3D.js";
export { Raycaster } from "three/src/core/Raycaster.js";
export { Triangle } from "three/src/math/Triangle.js";
export { _Math as Math } from "three/src/math/Math.js";
export { Spherical } from "three/src/math/Spherical.js";
export { Cylindrical } from "three/src/math/Cylindrical.js";
export { Plane } from "three/src/math/Plane.js";
export { Frustum } from "three/src/math/Frustum.js";
export { Sphere } from "three/src/math/Sphere.js";
export { Ray } from "three/src/math/Ray.js";
export { Matrix4 } from "three/src/math/Matrix4.js";
export { Matrix3 } from "three/src/math/Matrix3.js";
export { Box3 } from "three/src/math/Box3.js";
export { Box2 } from "three/src/math/Box2.js";
export { Line3 } from "three/src/math/Line3.js";
export { Euler } from "three/src/math/Euler.js";
export { Vector4 } from "three/src/math/Vector4.js";
export { Vector3 } from "three/src/math/Vector3.js";
export { Vector2 } from "three/src/math/Vector2.js";
export { Quaternion } from "three/src/math/Quaternion.js";
export { Color } from "three/src/math/Color.js";
export { GridHelper } from "three/src/helpers/GridHelper.js";
export { AxesHelper } from "three/src/helpers/AxesHelper.js";
export * from "three/src/constants.js";
export { InstancedBufferGeometry } from "three/src/core/InstancedBufferGeometry.js";
export { InstancedInterleavedBuffer } from "three/src/core/InstancedInterleavedBuffer.js";
export { InterleavedBufferAttribute } from "three/src/core/InterleavedBufferAttribute.js";
export { ShaderMaterial } from "three/src/materials/ShaderMaterial.js";
export { WireframeGeometry } from "three/src/geometries/WireframeGeometry.js";

webpack.config.js

Copy
module.exports = {
  resolve: {
    alias: {
      // Forward all three imports to our exports file
      three$: path.resolve("./build/three-exports.js"),
    },
  },
};