three-minifier

Minify THREE.js

Introduction

This plugin helps projects who use THREE.js shrink their size by:

Resolve three / three/build/three.module.js to three/src/Three.js.
- This makes it possible for bundlers to perform better tree-shaking.
Mark three as side-effect free.
Replace WebGL constants with literals.
Minify GLSL files.

This plugin also resolves three-nodes and three-addons modules.

Requirements

node >= v12.0
three.js >= r120
Webpack plugin requires Webpack 5

Usage

Rollup

npm install --save-dev @yushijinhun/three-minifier-rollup

rollup.config.js:

import { threeMinifier } from "@yushijinhun/three-minifier-rollup";
...
export default {
	...
	plugins: [
		threeMinifier(), // <=== Add plugin on the FIRST line
		...
	]
};

Webpack

npm install --save-dev @yushijinhun/three-minifier-webpack

webpack.config.js:

const ThreeMinifierPlugin = require("@yushijinhun/three-minifier-webpack");
const threeMinifier = new ThreeMinifierPlugin();
...
module.exports = {
	...
	plugins: [
		threeMinifier, // <=== (1) Add plugin on the FIRST line
		...
	],
	resolve: {
		plugins: [
			threeMinifier.resolver, // <=== (2) Add resolver on the FIRST line
			...
		]
	}
};

Next.js

npm install --save-dev @yushijinhun/three-minifier-webpack

next.config.js:

const ThreeMinifierPlugin = require("@yushijinhun/three-minifier-webpack");

module.exports = {
	webpack: (config, { isServer, dev }) => {
		if (!isServer && !dev) {
			config.cache = false;
			const threeMinifier = new ThreeMinifierPlugin();
			config.plugins.unshift(threeMinifier);
			config.resolve.plugins.unshift(threeMinifier.resolver);
		}
		return config;
	},
};

Vite & SvelteKit

Most Rollup plugins are compatible with Vite, including three-minifier. SvelteKit uses Vite as its build tool, so the setup is the same as for Vite.

npm install --save-dev @yushijinhun/three-minifier-rollup

vite.config.(js|ts):

import { defineConfig } from "vite";
import { threeMinifier } from "@yushijinhun/three-minifier-rollup";
// import { sveltekit } from '@sveltejs/kit/experimental/vite';

export default defineConfig({
	plugins: [
		{ ...threeMinifier(), enforce: "pre" }, // <=== Add plugin here
		// sveltekit(),
	]
});

FAQ

Does it really work?

Yes!

Consider the following example:

import { WebGLRenderer } from "three";
console.log(WebGLRenderer);

Rollup: 576K => 354K
Webpack: 582K => 354K

Do I need to modify any existing code?

No. These are the acceptable approaches to importing THREE.js:

import { ... } from "three";
import { ... } from "three/build/three.module.js";
import { ... } from "three/src/Three";
import { ... } from "three/src/math/vector3";
// or something like these

Does this work with examples jsm modules?

Yes. This plugin solves mrdoob/three.js#17482.

You do not need to do any extra work to use examples jsm modules.

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// import { OrbitControls } from "three-addons/controls/OrbitControls"; // equivalent to the previous one

import { NodeMaterial } from "three/examples/jsm/nodes/materials/Materials";
// import { NodeMaterial } from "three-nodes/materials/Materials"; // equivalent to the previous one

Will one day I no longer need this plugin?

In order to make THREE.js tree-shakable, efforts have been made by many people on the upstream project. However, THREE.js hasn't come up with a feasible solution so far. See related issues to learn more.

yushijinhun/three-minifier