rapideditor/country-coder

Reduce package/bundle size - dynamically import borders.json

Opened this issue · 1 comments

Motivation

Currently when taking dependency on country-coder npm package a bundle will get heavier by ~600kb.
The main reason is due to borders file which takes 595kb and is directly imported in source code.
e.g. running build analysis in iD would tell that iD bundle is 3MB while country-coder takes 600kb (~15%), however it seems that geojson is not the best candidate for web-standard compressions (e.g. br) which is why this piece takes ~35% of the compressed bundle.

Making such bundle overhead impacts fcp (especially with users that have low speed connection) which can be avoided in case when borders.json is not necessary for startup/fcp.

Proposal

Create lazy/dynamic load of the borders file inside the country-coder.
Potential implementation is to have init()/ensureLoaded() method to request+load the heavy file and return the promise which then gets resolved. Unfortunately, that would result in shell pattern (unpopulated object which enables default 'empty' functionalities which become functional after init is done), however in this case it would be worth it.

Yeah, looking at the current stats for our dev RapiD build, this data is the largest chunk at around 663k. It would be nice to lazy load this like we do with the other data files.

Screen Shot 2022-11-10 at 10 24 46 AM