Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Codesplit WebGL/WebGPU entrypoints #29404

Open
wants to merge 7 commits into
base: dev
Choose a base branch
from

Conversation

CodyJasonBennett
Copy link
Contributor

@CodyJasonBennett CodyJasonBennett commented Sep 13, 2024

Related issue: #29156

Description

Emits a build where three/webgpu re-exports from core to avoid user configuration or duplication. Each entrypoint will no longer bundle a unique copy of three.js but share a single copy.

To prevent future issues with tree-shaking (#28670), I've code split the common core and code specific to a backend.

// src/Three.core.js -> build/three.core.js -> build/three.core.min.js
export { Vector3 } from './math/Vector3.js';

// window.__THREE__ check for duplication here
// src/Three.js -> build/three.module.js -> build/three.module.min.js -> build/three.cjs

export * from './Three.core.js';
export { WebGLRenderer } from './renderers/WebGLRenderer.js';
// src/Three.WebGPU.js -> build/three.webgpu.js -> build/three.webgpu.min.js

export * from './Three.core.js';
export { WebGPURenderer } from './renderers/webgpu/WebGPURenderer.js';

Copy link

github-actions bot commented Sep 13, 2024

📦 Bundle size

Full ESM build, minified and gzipped.

Before After Diff
WebGL 686.07
169.79
337.84
78.55
-348.23 kB
-91.25 kB
WebGPU 832.49
223.05
488.13
133.64
-344.36 kB
-89.41 kB
WebGPU Nodes 832
222.92
15.5
5.23
-816.5 kB
-217.69 kB

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Before After Diff
WebGL 462.42
111.53
462.51
111.26
+93 B
-269 B
WebGPU 529.96
142.77
529.96
142.77
+0 B
+0 B
WebGPU Nodes 486.62
132.63
529.96
142.78
+43.34 kB
+10.14 kB

input: 'test/treeshake/index.webgpu.nodes.js',
input: 'test/treeshake/index.webgpu.js',
Copy link
Contributor Author

@CodyJasonBennett CodyJasonBennett Sep 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Undid this change, but three.webgpu.nodes.js is unused, and duplicate with WebGPU (missing only the recent BundleGroup export). CI still measures WebGL, WebGPU, WebGPU + Nodes. Maybe it can measure the common core instead?

@donmccurdy
Copy link
Collaborator

Minor thing, but I'm seeing some duplication of build artifacts when running npm run build locally:

> ls ./build

three.cjs                 three.module.js           three.webgpu.min.js
three.core.min2.js        three.module.min.js       three.webgpu.nodes.js
three.core2.js            three.webgpu.js           three.webgpu.nodes.min.js

That aside, I think this looks like a good approach! Shared 'core' that the WebGL and WebGPU entrypoints can use, and that doesn't need to be exposed as a separate public entrypoint to users.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants