当前位置：首页 > ds >正文

深入理解现代前端开发中的＜script type=“module“＞与构建工具实践

ds 2025/7/28 6:55:14

引言：模块化开发的演进

在早期的前端开发中，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>