type="module"是浏览器的环境切换器，启用后整套脚本加载、解析、执行逻辑变为es模块规范：import必须在type="module"脚本中使用，路径需带./或/且含扩展名，模块默认defer并按模块图顺序执行，作用域隔离，预加载用modulepreload，跨域需crossorigin及cors头。
type="module 不是开关，是环境切换器——加了它，浏览器就扔掉传统脚本那一套，整套加载、解析、执行逻辑全换。
为什么写了 import 还报 “Cannot use import statement outside a module”
这不是语法错，是上下文错：
- 写了
import却放在没加type="module"的<script></script>里，浏览器按 classic 脚本执行，自然不认import - 用了
import('./a.js')动态导入，但所在脚本本身没被标记为模块（比如写在<script></script>里没加type="module"），import()只能在模块上下文中调用 - 本地双击打开 HTML（
file://协议），Chrome/Firefox 直接拒绝加载模块脚本，控制台只显示 CORS 错误或空错误——这不是报错，是压根不发请求
路径必须带 ./ 或 ../，且不能省略扩展名
ES 模块规范强制路径静态化，浏览器不做任何推测：
-
import { foo } from './utils.js'✅ 显式扩展名 + 相对路径前缀 -
import { foo } from './utils'❌ 报Failed to load module script：浏览器不会自动补.js -
import { foo } from 'lodash'❌ 静态解析失败，除非配了<script type="importmap"></script> -
import { foo } from 'utils.js'❌ 裸路径，浏览器无法判断是相对还是绝对，直接SyntaxError
模块脚本默认 defer，但和传统 defer 有本质区别
它不是“延迟执行”，而是“按模块图顺序执行”：
- 下载与 HTML 解析并行，但执行一定在 DOM 构建完成之后（等价于
DOMContentLoaded） - 多个
type="module"脚本严格按出现顺序执行，哪怕它们是异步加载的——这是模块图决定的，不是靠 DOM 顺序模拟 - 每个模块顶层声明的
const、function都不会挂到window上，作用域彻底隔离 - 模块里拿不到
document.currentScript，它始终是null
想预加载模块？用 modulepreload，不是 preload 或 prefetch
modulepreload 只下载，不解析、不执行、不建模块图：
-
<link rel="modulepreload" href="/app.js">必须和后续<script type="module" src="/app.js"></script>的src完全一致（含查询参数） - 跨域模块（如 CDN 上的
lodash-es）必须加crossorigin属性，否则静默失败 - 它不会递归预加载
import的依赖，比如app.js里import './utils.js'，得手动加另一条modulepreload - 路径必须是绝对路径或根相对路径（如
/assets/main.mjs），不支持./main.mjs
最常被忽略的一点：模块加载走的是 mode: 'cors'，哪怕同源，服务端也必须返回 Access-Control-Allow-Origin 头；本地开发别双击，起个最小 HTTP 服务（npx serve 或 python3 -m http.server）才是正解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
