Include asset map at build time

[simonihmig]

Currently the asset map is loaded via an additional XHR request, that even defers the app readiness. Have you thought about including the map at build time to save the additional roundtrip to the server?

I guess part of the problem is that the asset map is available only after the app has been built, but it should be probably not hard to insert the map directly into the index.html. This increases the payload of the index.html, but as the asset map is going to be loaded anyways, I see no drawbacks there, while still saving the additional request.

Nice addon btw, needed sth like this some time ago, thought about making this by myself when there is time, but apparently you were faster! 👏

[RuslanZavacky]

Hey @simonihmig, Thank you for your suggestion. I was thinking about that as well :) there are several things to consider

When we include asset map file as a separate resource, it will be loaded once and defer app readiness. But for the next request, it will be cached by a client browser, though it won't take additional time to load.

As in most cases, assets are cached, but index.html is not to allow fast deploys. The approach of the separate file might be a bit faster.

Also, when you include asset map in index.hml, you will increase index file size which will be re-downloaded every request (or maybe not every, depends on your deployment configuration).

In the end, I am currently thinking of adding it as an option. If you want to have your asset map in index.html file or maybe there is a better way of adding it straight into app.js.

[simonihmig]

Wow, that was fast! :)

Yeah, valid concerns for sure. Certainly much of that depends on the amount of mapping data you expect. For just a few assets like some images the non-caching of index.html will probably not be a big problem, and saving the request (even if it is just for the first load) would be preferable, especially on mobile and when so many are talking about perf measures like "time to interactive". But as I said it depends...

I guess it would be also possible to include the map right into app.js. Probably would require some "hackery" like building app.js with some placeholder (some marker like ###ASSETMAP###) and later replacing this in some postprocessing step when the asset map is available.

But that approach could also have some significant drawbacks. Like when one image is updated this would generate a new image hash, and thus also a new hash on app.js itself. That invalidates the cached app.js on all clients and forces all to reload it, while maybe not a single line of JS has changed.

So, in the end, it all depends... ;)

[pedrokost]

I also think adding an option to embed the asset map in index.html would be a great idea. Currently, everything is delayed until the asset map is loaded, which although takes just a few milliseconds, it's still unnecessary.

The option of preloading the asset map mentioned in #1 is also good - the asset map will most likely always be loaded faster than the vendor.js and app.js files therefore it wouldn't affect the time-to-first-render.

In my use case (http://www.klubi.si/fitnes) the asset map is tiny, so I would opt for including it in the index.html.

[RuslanZavacky]

@pedrokost including contents of asset map into index.html is a valid option, I'll hope to look into it shortly. And #1 should be simply enough to implement, will check as well.

[pedrokost]

I've implemented inlining the asset map into the index.html. This is making my app about 200ms faster to render!

[RuslanZavacky]

@pedrokost that's amazing! Thank you! I'll take a look soon :)

[RuslanZavacky]

Closed in #14