第二十三章 Module 的載入實現

上一章介紹了模組的語法，本章介紹如何在瀏覽器和 Node 之中載入 ES6 模組，以及實際開發中經常遇到的一些問題（比如迴圈載入）。

1 瀏覽器載入

defer與async的區別是：defer要等到整個頁面在記憶體中正常渲染結束（DOM 結構完全生成，以及其他指令碼執行完成），才會執行；async一旦下載完，渲染引擎就會中斷渲染，執行這個指令碼以後，再繼續渲染。一句話，defer是“渲染完再執行”，async是“下載完就執行”。另外，如果有多個defer指令碼，會按照它們在頁面出現的順序載入，而多個async指令碼是不能保證載入順序的。

2 載入規則

瀏覽器載入 ES6 模組，也使用<script>標籤，但是要加入type="module"屬性。

瀏覽器對於帶有type="module"的<script>，都是非同步載入，不會造成堵塞瀏覽器，即等到整個頁面渲染完，再執行模組指令碼，等同於開啟了<script>標籤的defer屬性。

<script type="module" src="./foo.js"></script>
<!-- 等同於 -->
<script type="module" src="./foo.js" defer></script>

如果網頁有多個<script type="module">，它們會按照在頁面出現的順序依次執行。

ES6 模組也允許內嵌在網頁中，語法行為與載入外部指令碼完全一致。

<script type="module">
  import utils from "./utils.js";
  // other code
</script>

2. ES6 模組與 CommonJS 模組的差異

3. Node 載入

4. 迴圈載入

5. ES6 模組的轉碼