@vxna/optimize-three-webpack-plugin
A compat layer that enables tree shaking and human-readable imports.
Warning
-
webpack@>=5andthree@>=0.128.0required. -
I am not sure if it works with TypeScript or react-three-fiber, PR welcome.
-
three@0.109.0introduced ES6 in the core. If you have to support older browsers, you must transpile it.
Usage
See full example.
Aliases always generated at the build time by plugin itself so you're free to use anything that's inside your local examples/jsm folder with just omitting the examples/jsm part off your import.
webpack.config.js:
const OptimizeThreePlugin = require('@vxna/optimize-three-webpack-plugin')
module.exports = {
plugins: [new OptimizeThreePlugin()],
}Your code:
// lib imports
import { WebGLRenderer } from 'three'
// examples/jsm imports
import { GLTFLoader } from '@three/loaders/GLTFLoader'Rationale
Using KTX2 texture loader example @ three@0.133.1
Before:
$ ls -ghs dist
total 610K
4.0K drwxr-xr-x 1 197121 0 Oct 28 06:13 ./
4.0K drwxr-xr-x 1 197121 0 Oct 28 06:00 ../
0 drwxr-xr-x 1 197121 0 Oct 28 06:08 libs/
48K -rw-r--r-- 1 197121 48K Oct 28 06:08 91db5a3f3f298a14c81a.ktx2
1.0K -rw-r--r-- 1 197121 358 Oct 28 06:10 index.html
548K -rw-r--r-- 1 197121 545K Oct 28 06:13 main.bundle.js
1.0K -rw-r--r-- 1 197121 92 Oct 28 06:13 main.bundle.js.LICENSE.txt
4.0K -rw-r--r-- 1 197121 1.5K Oct 28 06:10 runtime.bundle.js
$ gzip-size dist/main.bundle.js
134 kB
After:
$ ls -ghs dist
total 513K
4.0K drwxr-xr-x 1 197121 0 Oct 28 06:17 ./
4.0K drwxr-xr-x 1 197121 0 Oct 28 06:00 ../
0 drwxr-xr-x 1 197121 0 Oct 28 06:08 libs/
48K -rw-r--r-- 1 197121 48K Oct 28 06:08 91db5a3f3f298a14c81a.ktx2
1.0K -rw-r--r-- 1 197121 358 Oct 28 06:10 index.html
452K -rw-r--r-- 1 197121 451K Oct 28 06:17 main.bundle.js
4.0K -rw-r--r-- 1 197121 1.5K Oct 28 06:10 runtime.bundle.js
$ gzip-size dist/main.bundle.js
115 kB
Older browsers
Assuming that you're already using Babel, this is one of many possible ways to make three@>=0.109.0 work in older browsers:
webpack.config.js:
const path = require('path')
const OptimizeThreePlugin = require('@vxna/optimize-three-webpack-plugin')
const three = path.join(path.dirname(require.resolve('three')), '..')
module.exports = {
module: {
rules: [
{
include: three,
use: 'babel-loader',
},
],
},
plugins: [new OptimizeThreePlugin()],
}
