JavaScript 動態載入 import() 與靜態載入 import 指南

更新日期： 2025 年 1 月 3 日

在現代 JavaScript 應用中，模組化的設計使代碼更易於管理和維護。

模組的載入方式可以分為 靜態載入 和 動態載入。

靜態載入更適合小型應用，而動態載入則能大幅提升大型應用的性能表現。

本文將為新手介紹這兩種模組載入方式的差異、特徵以及使用場景，幫助你在開發中做出最佳選擇。

靜態載入：穩定但固定

靜態載入是什麼？

靜態載入指在應用運行之前，所有模組已經被明確引入到程式中，並在打包階段進行解析和合併。

它使用 ES6 的 import 語法，並在程式啟動時同步載入。

特徵

1. 固定性：模組的導入在程式執行前完成，無需額外的條件判斷。
2. 同步執行：模組載入與代碼執行順序一致。

優點與缺點

使用範例

// 靜態載入範例
import { init } from "./scripts/switching_tab.js";

init(); // 程式開始時，模組已可用

動態載入：靈活且高效

動態載入是什麼？

動態載入是在程式執行期間，根據需要動態加載模組。

它使用 ES6 的 import() 語法，是非同步操作，返回一個 Promise。

特徵

1. 靈活性：模組僅在需要時才載入，避免不必要的代碼執行。
2. 非同步執行：不會阻塞程式主線程，提升性能表現。

優點與缺點

使用範例

// 動態載入範例
const pageName = "switching_tab";

if (pageName === "switching_tab") {
  import("./scripts/switching_tab.js").then((module) => {
    module.init(); // 當模組載入完成後執行
  });
}

靜態載入與動態載入的比較

動態載入的特性與 Promise 的關係

import() 與 Promise

• Promise 的特性：
  • 成功：模組成功載入後，Promise 進入 resolved 狀態並返回模組。
  • 失敗：模組載入失敗時，Promise 進入 rejected 狀態。

使用 then()

then() 是 Promise 的方法，用來處理模組成功載入後的邏輯。

import("./scripts/switching_tab.js").then((module) => {
  module.init(); // 載入成功後執行
}).catch((error) => {
  console.error("Failed to load module:", error); // 處理載入失敗
});

使用 async/await

async/await 提供了更簡潔的語法來處理非同步操作，代碼看起來像同步執行。

(async () => {
  try {
    const module = await import("./scripts/switching_tab.js");
    module.init(); // 模組載入完成後執行
  } catch (error) {
    console.error("Failed to load module:", error);
  }
})();

動態載入的典型應用場景

按需加載路由

在大型應用中，不同頁面可能需要不同的模組。使用動態載入能有效減少初始頁面加載時間。

const pageName = getPageName();

if (pageName === "dashboard") {
  import("./scripts/dashboard.js").then((module) => module.init());
} else if (pageName === "settings") {
  import("./scripts/settings.js").then((module) => module.init());
}

條件載入功能

根據用戶行為或設備條件，選擇性載入特定模組。

if (isHighPerformanceDevice()) {
  import("./high-performance-graphics.js").then((module) => {
    module.enable();
  });
}

性能優化

只在需要時載入模組，避免不必要的代碼執行。

總結

1. 靜態載入適合小型應用，模組在應用啟動時即可用。
2. 動態載入適合大型應用，支持按需加載與條件加載，有助於性能優化。
3. Promise 的重要性：import() 返回 Promise，這是動態載入非同步特性的核心，需用 then() 或 async/await 處理載入完成後的邏輯。

希望本篇指南能幫助你理解兩種模組載入方式的特性，並靈活應用到你的專案中！