Networking and resource loading
How module scripts load
Understand the default deferred behavior of module scripts and how their dependency graph changes loading.
8 minute lesson
A module script is deferred by default:
<script type="module" src="/app.js"></script>The browser can continue parsing HTML while it fetches the entry module. It then follows static import statements and fetches the dependency graph before evaluating the entry.
Module scripts execute after document parsing. Adding defer does not change this default behavior.
The graph matters for performance. A small entry file can still uncover many dependent requests. Deep chains delay the module that depends on their completion.
Dynamic import() is different. The browser discovers that module when execution reaches the call, which can reduce initial work but delay the feature using it.
Use the Network panel Initiator chain to follow module requests. In the Performance panel, compare download completion with evaluation time; network completion does not guarantee that the main thread was ready to run the code.
Exercise: create an entry module importing two small files. Reload and trace the dependency graph in DevTools.
Lesson completed