search

troisjs / trois

✨ ThreeJS + VueJS 3 + ViteJS ⚡
https://troisjs.github.io
MIT License
4.2k stars 301 forks source link

Bundle Size improvements? #11

Closed santicros closed 3 years ago

santicros commented 3 years ago

Hi! First thanks for the work and it's great to have some sort of React-Three-Fiber for Vue 🔥

I was trying it and I'm a bit concerned about the size. With the demo from the README I'm getting a 925kb size. I believe that Trois is importing every component form Three.js, so it makes a very large bundle.

I was comparing the size and package distributions to React-three-fiber:

Bundle size for Trois Comparassion Bundle Size for React-three-fiber
Screenshot_2021-03-02 BundlePhobia Screenshot_2021-03-02 BundlePhobia(1)

Would it be technically possible to not import Three like React-three-fiber does, or only import the components that are being used by the user?

Thanks a lot!

klevron commented 3 years ago

You are right, the bundle size on https://troisjs.github.io is big. I had to bundle threejs because I use vitepress ssr, and code from the threejs examples (this part is not exported as cjs).

But you can import components one by one (don't use the vue plugin), I will add examples later.

klevron commented 3 years ago

0.1.6 fix this

santicros commented 3 years ago

Thanks for the updates @klevron !!!

klevron commented 3 years ago

Well, it does not really fix the issue because TroisJS depends on ThreeJS.

React-Three-Fiber is really light because it use a custom renderer : https://twitter.com/0xca0a/status/1309229634870013952

I tried this approach few months ago but it was not so easy with VuejS : https://vuejs-course.com/blog/a-custom-renderer-for-vue-3

klevron commented 3 years ago

I let this issue open to remind me I have to try to create a custom renderer :)

https://lachlan-miller.me/articles/vue-3-pdf-customer-renderer

santicros commented 3 years ago

Thanks! Creating a custom renderer would be the perfect thing but I've also seen is not that easy.

Have you seen Lachlan's Youtube series of creating a custom PDF renderer? It was very interesting. Really recommend it!! https://youtube.com/playlist?list=PLC2LZCNWKL9b876nPMVULEyBzkVoH8B7n

UPDATE: Oh, I've seen is the link on the your last comment. I directly entered the tweet from Paul and then though about the video series. Sorry hahah

But still it's a complex task hahaha 😃

klevron commented 3 years ago

I moved some deps to dev, so it is ok now for bundle size : https://bundlephobia.com/result?p=troisjs@0.1.10

klevron commented 3 years ago

15