@yushijinhun/three-minifier-webpack v0.4.0

three-minifier

Minify THREE.js

This plugin hasn't been fully tested, and may be UNSTABLE. Use with caution.

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.
  • You can turn it off by setting sideEffects: true if you need the polyfills in THREE.js.
• Replace WebGL constants with literals.
  • Can be turned off by setting noCompileGLConstants: true.
  • About this.
• Minify GLSL files.
  • Can be turned off by setting noCompileGLSL: true.
  • About this.

Usage

Rollup

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

rollup.config.js:

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

Webpack

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

webpack.config.js:

const threeMinifier = new ThreeMinifierResolver({/* options */});
...
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

Options