Id: Slim down intro_graph

[tmcw]

After #3344, iD.min.js is 2mb. Not a terribly large bundle - not top priority to slim it down. But intro_graph.json takes up 25% of that size - 500kb without whitespace. Ideally we can reduce the size of intro_graph significantly.

[bhousel]

Yeah, I thought about this.. https://github.com/openstreetmap/iD/issues/1336#issuecomment-166441749

I think it's mostly the river geometries that extend far beyond the parts of town where the tutorial happens.

Check out imagery.json - we can probably save some space there too..

[bhousel]

One weird but necessary thing rollup-plugin-json does is generate "gunky" output when importing json. (see https://github.com/rollup/rollup-plugin-json/issues/5)

It creates a lot of extra keys -- but only the toplevel ones..

So instead of importing json with a lot of toplevel properties:

{'node1':{stuff}, 'node2':{stuff}, ... many more }
... then ...
import { default } from '../../../data/intro_graph.json';

...we get far less "gunk" in the generated bundle if we wrap each json file in a toplevel property:

{ 
  introGraphRaw: {'node1':{stuff}, 'node2':{stuff}, ... many more }
}
... then ...
import { introGraphRaw } from '../../../data/intro_graph.json';

This might be a good workaround for your issue https://github.com/rollup/rollup-plugin-json/issues/11 too.

[bhousel]

Update on this: 2e81e71 gives us a handy function for exporting the intro graph. The tutorial is now a lot more open-ended, so it's easy to make whatever edits we want and save them to a new intro graph by calling id.history().toIntroGraph() in the developer console.

Using this trick, I trimmed back the rivers and simplified the admin boundary surrounding the city. I also removed a bunch of unnecessary area=yes and other things (see 9933a36). This slimmed the graph down from 527K minified to 293K minified. I'm going to leave the _un_ minified file in source control, because it is easier for git to perform diffs that way, and rollup will minifiy it anyway when intro_graph.json gets bundled.

Next I'll add some more useful things to the intro graph per #3068, but probably not _too_ much. I might also remove some more features from parts of the city further away from the tutorial. I guess the numbers can go up or down a little, but we have a lot more control over them now.

[iandees]

Starting with a pre-rolled graph like this makes me think that it might be good to add a short step to the walkthrough that reinforces the idea that it's OK to delete stuff that's obviously wrong. It might be a bit too complicated to describe all the caveats (the imagery might be old), but reminding people that they can both add and delete is an important thing.

[bhousel]

Yeah, good suggestion @iandees.. I was actually thinking of adding some "paper streets" somewhere in a farm field and having the user to delete them in the Lines chapter. Sound good?

[iandees]

Yea, that makes sense.

[bhousel]

After #3344, iD.min.js is 2mb. Not a terribly large bundle - not top priority to slim it down.

So an update!

These days iD has grown to be an 11mb bundle, which is now "terribly large" and a "top priority to slim it down". So I'm doing that.

Most of the bloat is from data files like the presets, imagery, community index, and other stuff. I made a data loader that will let us fetch these things at runtime and as needed instead of having them bundled in.

Another side benefit will be that we can even fetch some of these assets from a CDN if we want to. JSDelivr lets us request a file with appropriate semver range - so that we could have things like the community index or name suggestion index on a separate release schedule from the core iD code. iD will just fetch the latest compatible version (#4994!)

I did the intro_graph first, and it's kind of nice to see that giant pink box shrink by almost half a megabyte.

before

after

Ok, I admit - pretty underwhelming. But I'll spend some time on this, and we'll have much smaller and faster builds soon!