0.4.0 • Published 2 years ago
@yushijinhun/three-minifier-common v0.4.0
:warning: Before continuing... :warning:
- three.js >= r120 is required for three-minifier v0.2.x.
- Use three-minifier v0.1.x if your three.js < r120.
- This plugin hasn't been fully tested, and may be unstable. Use with caution.
- Node.js >= v12.0 is required.
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
tothree/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.
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
...
]
}
};
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 { WebGLRenderer } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// it works well
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.
Related issues & repositories
- Importing examples jsm modules causes bundlers to bundle three.js source code twice mrdoob/three.js#17482
- ReactAreaLights do not seem to work in a module bundler mrdoob/three.js#17220
- Add sideEffects: false flag to package.json to allow tree shaking mrdoob/three.js#16059
- Allow tree-shaking by adding "sideEffects": false flag mrdoob/three.js#16317
- Enable tree-shaking both for the main and examples files mrdoob/three.js#16301
- Support esm on node with conditional exports mrdoob/three.js#18498
- vxna/optimize-three-webpack-plugin
- mattdesl/threejs-tree-shake
0.4.0
2 years ago
0.3.1
2 years ago
0.3.0
3 years ago
0.3.0-alpha.0
3 years ago
0.2.0
4 years ago
0.2.0-alpha.2
4 years ago
0.2.0-alpha.1
4 years ago