perf: leaflet package is present 2 times in client bundle?

[Quasarman]

When bulding my application for production i noticed that the leaflet package is listed 2 times:

I analyzed the client bundle and see it also there:

Is this really necessary to ship both of these variants (default + esm)?

[Gugustinette]

I'll look at that when I have time, leaflet ships both variant, but as leaflet is client side, only the one loaded in the browser with Nuxt Leaflet should ship I guess.

That's some interesting bundler optimization to look at 👍

[Quasarman]

Great! Thank you!

[Maxel01]

@Quasarman
I think that's caused by the implementation in vue-leaflet.
It internally uses (LMap.vue)

if (props.useGlobalLeaflet) {
      WINDOW_OR_GLOBAL.L = WINDOW_OR_GLOBAL.L || (await import("leaflet"));
}
const { map, CRS, Icon, latLngBounds, latLng, stamp }: typeof L =
      props.useGlobalLeaflet
        ? WINDOW_OR_GLOBAL.L
        : await import("leaflet/dist/leaflet-src.esm");

which means, that import("leaflet") loads leaflet-src.js, and import("leaflet/dist/leaflet-src.esm") loads leaflet/dist/leaflet-src.esm.js. Therefore vue-leaflet needs both versions to work correctly.

[Gugustinette]

This might be resolved with Leaflet 2.0 and your vue-leaflet rewrite @Maxel01 I guess ?

[Maxel01]

Exactly. There is no need to import two different leaflet versions anymore (so far I can say)

[Quasarman]

Nice find!