question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

three.nebula.js containing a copy of all three.js code makes three.js included twice in webpack bundle

See original GitHub issue

Hi, I have noticed that since three-nebula package has a dependency on three.js, bundling applications that also have root dependencies to three.js causes three.js library to be included twice in the final bundle, one for the depedency on three-nebula and one for root dependencies on three.js.

Considering for example the following package.json dependencies:

"dependencies": {
    "three": "^0.104.0",
    "three-nebula": "^4.0.3",
  },

And the following js file:

import { Scene, PerspectiveCamera, Mesh } from "three"

import System, {
    Emitter,
    Rate,
    Span,
    Position,
    Mass,
    Radius,
    Life,
    Velocity,
    PointZone,
    Vector3D,
    Alpha,
    Scale,
    Color,
} from 'three-nebula'

Building this file using WebPack results in a file of 1.4 MB (threejs library packed alone is about 650 KB).

To include three.js only once in the bundle, the thing that works for me was to modify the file three-nebula/src/core/three.js to point directly to the root package ./node_modules/three/build/three.module.js (instead of ./node_modules/three-nebula/node_modules/three) and make imports from ./node_modules/three-nebula/src/index.js instead. In that case the final bundle size is around 800 KB.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9

github_iconTop GitHub Comments

1reaction
revyTHcommented, May 14, 2019

Great! I am using the library as stars particle system in a webgl website: https://ludik.herokuapp.com/#/

0reactions
rohan-deshpandecommented, Oct 15, 2019

This is how it was previously but it exploded the bundle size. I want the library to work in any context with minimal setup and to have as small a size as possible. The bundle size has been reduced greatly in the latest release. If there’s a way to get it working with the much cleaner approach as before, I’d be open to it! I really hate webpack though and want as little to do with it as possible. Would be really keen to see a PR with these changes if you feel it’s simple enough.

Edit: Btw I’m going to close this issue for now, I’ll open a new one and link to your comment @bummzack

Read more comments on GitHub >

github_iconTop Results From Across the Web

Two copies of Three.js were packaged by mistake when I ...
My new bundle is now almost twice the si… I checked the code of RGBELoader and found that it was referenced like this:...
Read more >
Why my import * as THREE from *three* didn't work?
I need to use three.js to do my school work and when I try run the code, appear nothing. I already did npm...
Read more >
Importing Three.js as module - Questions
Im learning three.js and are setting up my first project. Im basically running the example code from three.js website. It works fine when...
Read more >
How about making examples/jsm/ all import src/ ...
js instead of build/three.module.js? This will greatly facilitate source code testing and debugging.
Read more >
Core Performance Improvements, Webpack 5, React Native ...
We've made this more flexible, introduced per-project configuration in Nx workspaces using project.json files, and is now the default in Nx 13.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found