CommonJS or AMD dependencies can cause optimization bailouts

[caiusCitiriga]

Hi! First of all, thank you for this great plugin! Finally I can preload my tiles!! 🎉

There's just a little problem; using this plugin with angular 10 this warning is thrown:

WARNING in /frontend/webviews-workspace/dist/webviews-lib/fesm2015/webviews-lib.js depends on 'leaflet-edgebuffer'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

It is Angular warning us that this module is packed as a CommonJS or AMD module, and could cause the generation of large bundles, thus slower serving times of the application.

Suggestion

Angular suggests to use ECMAScript modules. Could it be possible to have a leaflet-edgebuffer-es package to use? ❤️

[TolonUK]

Hi @caiusCitiriga, I'm glad the plugin is useful for you. That seems like a good suggestion to me, I'll have a look at it. Any links to best practices in this area would be greatly appreciated. Ideally I'd like to keep support for older versions of Angular.

[caiusCitiriga]

Hi @TolonUK thank you for your quick reply! 😊

For what I could understand, the EcmaScript modules (or ES6 Modules) has became the standard now, since most browsers support them natively.

AMD were used mostly by web imports
CommonJS for server side apps (node)

I've found this article that explains it better:
https://exploringjs.com/impatient-js/ch_modules.html#overview-syntax-of-ecmascript-modules

Also, from what I've learned from Angular, this refactor/change won't break any previously developed angular apps, instead angular 10 now just warns you about the fact that the bundles could get too big, while previous versions wasn't warning about this but still was working.

Also the whole thing keeps working in Angular 10 without any problems, if not for that annoying warning 😅

[caiusCitiriga]

If I can help you with other researches or tests I'm very happy to contribute to this for what I can ❤️