I recently integrated the three.js library using NPM with the goal of leveraging its new ES6 modular architecture. This design allows for selective importation of specific modules as outlined in this resource: Threejs - Import via modules.
For bundling and transpiling, I am utilizing a combination of gulp, browserify, and babel. Here is a snippet from my build process:
gulp.task("build_js", () => {
return browserify({
entries: "./public/app/app.js",
cache: {},
dev: true
})
.transform(babelify, {presets: ["env"], plugins: ["syntax-async-functions", "transform-async-to-generator"], sourceMaps: true})
.bundle()
.pipe(source("app.bundle.min.js"))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: mode}))
.pipe(uglify())
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(config.build.js))
});
My objective is to optimize bundle size by importing only necessary modules. However, my observation is that regardless of selecting individual modules or importing all of them, the bundle size remains the same.
For instance, importing all modules in app.js results in a 500Kb bundle:
// app.js
import * as THREE from 'three'; // approximately 500 Kb
On the other hand, attempting to import just one module with ES6 syntax yields an identical bundle size (indicating that all modules are still being imported):
// app.js
import { Vector3 } from 'three'; // also around 500 Kb
Alternative approaches were tested as well:
// app.js
import { Vector3 } from "three/build/three.module.js";
This resulted in the following error:
SyntaxError: 'import' and 'export' may only appear at the top level (45590:0) while parsing /Users/revy/proj001/node_modules/three/build/three.module.js
Therefore, my question arises: how can I effectively import only required modules and maintain a compact bundle size?