引言：模塊化開發的演進
在早期的前端開發中，JavaScript 缺乏原生的模塊化支持，開發者不得不依賴 IIFE（立即調用函數表達式）或第三方庫（如 RequireJS）來實現代碼組織。隨著 ES6（ES2015）的發布，JavaScript 終于迎來了官方的模塊系統——ES Modules（ESM），這徹底改變了前端開發的方式。
一、<script type="module">?的革命
1.1 什么是 ES Modules？
ES Modules 是 JavaScript 的官方模塊標準，它通過?import?和?export?語法實現了模塊化編程：
// 模塊導出 (math.js)
export const add = (a, b) => a + b;// 模塊導入 (app.js)
import { add } from './math.js';1.2?type="module"?的特性
當我們在 HTML 中使用?<script type="module">?時，瀏覽器會以特殊方式處理這個腳本：
模塊作用域：變量不會污染全局命名空間
嚴格模式：代碼自動在嚴格模式下運行
延遲執行：默認具有?
defer?行為跨域限制：必須遵守 CORS 策略（Cross-Origin Resource Sharing：跨源資源共享，是一種基于 HTTP 頭的安全機制，用于控制網頁應用在不同源“domain”之間訪問資源的權限。）
<script type="module" src="app.js"></script>1.3 與傳統腳本的對比
| 特性 | type="module" | 傳統腳本 |
|---|---|---|
| 作用域 | 模塊作用域 | 全局作用域 |
| 嚴格模式 | 默認啟用 | 需要手動聲明 |
| 依賴解析 | 靜態分析（編譯時） | 動態解析（運行時） |
| 執行時機 | 默認 defer | 立即執行（阻塞渲染） |
| 文件擴展名 | 推薦 .mjs（接受 .js） | .js |
二、構建工具下的 TypeScript 模塊
2.1 為什么能直接導入 .ts 文件？
在現代構建工具如 Vite、Webpack 或 Rollup 中，直接導入?.ts?文件成為可能：
<script type="module" src="/src/main.ts"></script>這背后的魔法在于構建工具的處理流程：
開發環境：
Vite 服務器攔截請求
實時編譯 TypeScript 為 JavaScript
返回標準的 ES Module 給瀏覽器
生產環境：
構建時將?
.ts?編譯為?.js生成的文件名通常包含哈希值（如?
main.a1b2c3.js）
2.2 構建工具的工作流程（以 Vite 為例）
瀏覽器請求 main.ts → Vite 開發服務器 → 即時編譯 → 返回 ESM JavaScript → 瀏覽器執行這種設計帶來了極佳的開發體驗（HMR 熱更新）和高效的生產構建。
三、defer?的深層意義
3.1?defer?的核心作用
defer?屬性控制腳本的執行時機，其核心特點是：
不阻塞 HTML 解析：瀏覽器會并行下載腳本
保持執行順序：多個?
defer?腳本按聲明順序執行執行時機：在 DOM 解析完成后，
DOMContentLoaded?事件前觸發
3.2?type="module"?的隱式?defer
所有模塊腳本自動獲得?defer?行為：
<!-- 以下兩種寫法等效 -->
<script type="module" src="app.js"></script>
<script defer type="module" src="app.js"></script>3.3 不同加載策略對比
| 策略 | 執行時機 | 阻塞解析 | 順序保證 | 適用場景 |
|---|---|---|---|---|
| 無屬性 | 立即執行 | 是 | 否 | 傳統腳本 |
async | 下載完立即執行 | 否 | 否 | 獨立第三方庫（如分析） |
defer | DOM 解析后執行 | 否 | 是 | 主應用邏輯 |
type="module" | 同?defer | 否 | 是 | 現代模塊化應用 |
四、現代前端開發最佳實踐
4.1 項目結構建議
src/├── main.ts # 應用入口├── components/ # 組件├── utils/ # 工具函數└── styles/ # 樣式4.2 構建配置示例（vite.config.ts）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],build: {target: 'esnext' // 生成現代 ESM 代碼}
})4.3 性能優化技巧
代碼分割：利用動態?
import()?實現按需加載const module = await import('./heavy-module.ts')預加載：使用?
<link rel="modulepreload">?提前加載關鍵模塊共享依賴：將公共依賴提取為單獨 chunk
五、未來展望
隨著?ESM 導入映射（Import Maps）?的普及，未來可能實現：
<!-- 瀏覽器原生支持裸模塊導入 -->
<script type="importmap">
{"imports": {"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"}
}
</script><script type="module">
import { createApp } from 'vue' // 直接使用
</script>結語
從?<script type="module">?到構建工具對 TypeScript 的原生支持，現代前端開發已經實現了質的飛躍。理解這些技術背后的原理，能幫助我們構建更高效、更可維護的 Web 應用。隨著瀏覽器能力的不斷增強和工具鏈的持續優化，模塊化開發的體驗將會越來越好。
