Minify THREE.js
This plugin helps projects who use THREE.js shrink their size by:
three
/ three/build/three.module.js
to three/src/Three.js
.
three
as side-effect free.This plugin also resolves three-nodes
and three-addons
modules.
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
...
]
};
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
...
]
}
};
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;
},
};
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(),
]
});
Yes!
Consider the following example:
import { WebGLRenderer } from "three";
console.log(WebGLRenderer);
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
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
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.