search

Wildhoney / Leaflet.FreeDraw

:earth_asia: FreeDraw allows the free-hand drawing of shapes on your Leaflet.js map layer – providing an intuitive and familiar UX for creating geospatial boundaries similar to Zoopla and others. Included out-of-the-box is the concaving of polygons, polygon merging and simplifying, as well as the ability to add edges and modify existing shapes.
https://freedraw.herokuapp.com/
MIT License
540 stars 102 forks source link

Reduce bundle size #125

Open Loykos opened 6 years ago

Loykos commented 6 years ago

Hi,

I like very much this library! I'm building the library with webpack and the result file weight ~600 kb. Is there a way to reduce the bundle size?

Thanks for your suggestions

Wildhoney commented 6 years ago

We've already externalised clipper-lib, leaflet and ramda

Majority of the bundle is taken up by jsts (~430kb) which is a dependency of turf-intersect which we use for determining polygon intersections.

I don't think externalising turf-intersect makes much sense, as it's a fairly niche dependency. Requiring it to be an external dependency only defers the issue since the eventual bundle size remains the same.

When gzipped bundle size is ~127kb which of course you should be applying server-side. I actually think that's a fairly healthy size for the complexity of FreeDraw.

It may also be worth considering dynamically importing FreeDraw, and displaying a loading message of some kind whilst the chunk is loaded:

async loadMap(textNode) {
  textNode.innerHTML = 'We are loading the map...';
  await import('./map-with-freedraw.js');
  // voila...
}

That way FreeDraw stays out of the your main bundle, and is only requested when actually needed.

Loykos commented 6 years ago

Thanks @Wildhoney for answering me. I currently have gzip compression. I'll load the module async with dynamic import and I'll keep following the project.

Thank you!