10 Asset loading

This chapter covers:

  • Solving common asset loading challenges in a micro frontends context
  • Comparing techniques to deal with cacheability and synchronization when loading assets from different teams
  • Deciding what bundling strategy is appropriate: many smaller bundles or fewer large ones
  • Understanding how on-demand loading can be effectively used with micro frontends

In the preceding chapters, we covered a lot of different integration techniques. But we always focused on the content--integrating markup on the server and in the client. A topic we only discussed in passing is this: How to load the assets associated with a micro frontends? In this chapter, we’ll dive deeper into this significant side topic. There are at least a handful of aspects that you must consider. How can we ensure that teams can deploy a micro frontend and the needed assets on their own? How do you implement cache busting to improve cacheability without introducing tight coupling? How do you ensure that the loaded CSS and JS always fits the server-generated markup? How coarse or fine-grained should your bundles be? Do you want one big bundle for your application, one per team, or even smaller ones? How can on-demand loading techniques help in reducing the upfront asset data the browser needs to process?

10.1 Asset referencing strategies

10.1.1 Direct referencing

10.1.2 Challenge: Cache-busting and independent deployments

10.1.3 Referencing via redirect (client)

10.1.4 Referencing via include (server)

10.1.5 Challenge: Synchronizing markup and asset versions

10.1.6 Inlining

10.1.7 Integrated solutions (Tailor, Podium, ...)

10.1.8 Quick summary

10.2 Bundle granularity

10.2.1 HTTP/2

10.2.2 All-in-one bundle

10.2.3 Team bundles

10.2.4 Page and fragment bundles

10.3 On-demand loading

10.3.1 Proxy micro frontends

10.3.2 Lazy loading CSS