Skip to content

make lib tree-shakable #378

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

Open
nonlinearcom opened this issue Aug 29, 2024 · 3 comments
Open

make lib tree-shakable #378

nonlinearcom opened this issue Aug 29, 2024 · 3 comments
Labels
contribution welcome enhancement New feature or request help wanted Extra attention is needed refactoring

Comments

@nonlinearcom
Copy link

Hi, after adding vue3-openlayers as a plugin to a clean Nuxt project, the client bundle shows a large file (vue3-openlayers.es.js) of over 1MB. The same issue occurs when performing selected imports, like import { Map, Layers, Sources } from "vue3-openlayers (975 KB).

Is it possible to reduce the size of the bundled package? 🤔

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] invalid: "latest" from the root project
└── [email protected]

To Reproduce
Steps to reproduce the behavior:

Reproduction repo

Run npx nuxi analyze

Screenshots
Screenshot 2024-08-29 at 16 22 46

@nonlinearcom nonlinearcom added the bug Something isn't working label Aug 29, 2024
@YXYH-12138
Copy link

Yes, I have encountered the same issue, and this library cannot be tree-shaken.🤔

@d-koppenhagen
Copy link
Collaborator

Hey, would like to contribute and refactor it? I think it would be acceptable if a Breaking Change is introduced. The best in my opinion would be to allow to import / load components individually and therefore expose them.

@d-koppenhagen d-koppenhagen added enhancement New feature or request help wanted Extra attention is needed contribution welcome refactoring and removed bug Something isn't working labels Dec 17, 2024
@d-koppenhagen d-koppenhagen changed the title Client bundle size (Nuxt) make lib tree-shakable Dec 17, 2024
@vincerubinetti
Copy link

vincerubinetti commented Feb 20, 2025

Hmm this is a bit concerning.

I have a SPA Vue app using Vite. Using vite-bundle-visualizer, I get this:

Image

It looks like this package is taking up ~1.5 MB (uncompressed) and OL itself ~2 MB. In the OL breakdown, I think those sub-assets are only ones I'm actually using (though I'm not using the webgl renderer as far as I know). Not sure how much of that 1.5 MB is necessary vs un-necessary.

Over-the-wire, both libraries together are about 750kb, which is pretty bad.

Also notice that I still have leaflet installed (I'm currently transitioning to OL), and it's way way smaller. But Open Layers does have way more functionality than Leaflet.


Does anyone have a direct bundle size comparison between using this package and using OL directly?

Edit: I switched off from this library to just raw OL, with the exact same features (plus a couple extra), and can make a direct comparison:

Image

OL now only takes up ~1.5 MB (uncompressed). Still a lot, but 0.5 MB less than when using this package... probably due to only importing the things from OL I needed. And then I of course don't have the MB of this package.

Overall, the transition was a good experience and only cost me ~70 extra lines of code to achieve the same thing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
contribution welcome enhancement New feature or request help wanted Extra attention is needed refactoring
Projects
None yet
Development

No branches or pull requests

4 participants