Feature Request: better tree-shaking about pixijs HOT 5 OPEN

We have made a lot of progress with regards to tree-shaking as well as using dynamic imports to reduce the bundle filesize. It would be helpful if you could provide a concrete example. Many code bundler are better or worse at tree-shaking. For instance, I found Parcel to be worse than Vite. Could you provide more specific about what you found?

That said, we do have a path for creating a composable versions of pixi.js (in v7 we had this tool https://pixijs.io/customize/) . We haven't fully creating tooling or guides around this for v8, but I know @Zyie is thinking about it. As a starting place, you can look at src/index.ts which is the default pixi.js import. You could create your own version of this using imports to the pieces you need (e.g., pixi.js/accessibility, pixi.js/culling etc. ).

from pixijs.

So, 2 topics:

1/ Extensions (point raised in #10393)

Patching index.ts isn't needed as it tree-shakes fine - it's just the library exports.

In reality, features like Event and Accessibility systems are initialized/wired explicitly in browserAll.ts and the bundle.*'s which call the extensions' init.ts.

Agreed though, it's simple enough to patch, if one is happy doing their own build of Pixi.

2/ Render pipeline (Graphics, Tiling...)

However that's not all, "renderables" have hard references in the render pipeline:

• https://github.com/pixijs/pixijs/blob/dev/src/prepare/PrepareQueue.ts#L58-L83
• https://github.com/pixijs/pixijs/blob/dev/src/prepare/PrepareUpload.ts#L40-L43

I appreciate how amazeball the vector graphics feature is, but we don't need and it represents ~20% of the library payload. I believe some decoupling/IoC could be done - and I'm confident it can be done without over-engineering.

from pixijs.

Hmm yeah no the GraphicsContext is referenced all over the place. Difficult to tell quickly how it's used, e.g. for TextStyle.

from pixijs.

Hey @elsassph you should be able to pass manageImports: false in the init function to allow for things like events/accessibility to not be added automatically e.g.

const app = new Application();

await app.init({
    manageImports: false
});

as for the imports you can also manually add the ones you want

  // imported by default
  import 'pixi.js/accessibility';
  import 'pixi.js/app';
  import 'pixi.js/events';
  import 'pixi.js/filters';
  import 'pixi.js/sprite-tiling';
  import 'pixi.js/text';
  import 'pixi.js/text-bitmap';
  import 'pixi.js/text-html';
  import 'pixi.js/graphics';
  import 'pixi.js/mesh';
  import 'pixi.js/sprite-nine-slice';

  // not added by default, everyone needs to import these manually
  import 'pixi.js/advanced-blend-modes';
  import 'pixi.js/unsafe-eval';
  import 'pixi.js/prepare';
  import 'pixi.js/math-extras';
  import 'pixi.js/dds';
  import 'pixi.js/ktx';
  import 'pixi.js/ktx2';
  import 'pixi.js/basis';

from pixijs.