动态 import() 不能直接加载 HTML 文件，仅支持 JavaScript 模块；需用 fetch() 加载 HTML 片段并注入，或通过构建工具（如 Vite ?raw）转为字符串，但非浏览器原生能力。
动态 import() 在 HTML 中根本不能直接用
HTML 本身不支持 import() 语法——它不是 HTML 的能力，而是 JavaScript 模块系统的运行时特性。你看到的“动态 import HTML”通常是指：在 JS 中用 import() 加载一个 .js 文件（里面可能包含 HTML 模板逻辑），或者加载一个导出 HTML 字符串/组件的模块。直接 import('./xxx.html') 会 404 或触发 MIME 类型错误，现代浏览器默认拒绝解析 HTML 文件为 JS 模块。
想按需加载 HTML 片段？用 fetch() + innerHTML 更实际
多数所谓“动态 import HTML”的真实需求，其实是插入一段远程 HTML 片段（比如侧边栏、弹窗内容）。这时不该硬套 import()，而应走标准资源加载路径：
-
fetch('./sidebar.html')获取字符串，再用element.innerHTML = htmlString注入（注意 XSS 风险，只用于可信源） - 服务端返回的 HTML 必须是纯片段（不含
<html>、<body>），否则解析后结构错乱 - 如果片段含
<script>标签，innerHTML不会执行它们；需手动提取并eval()或创建<script>元素 append - 想保留事件绑定或框架组件？别用纯 HTML 字符串，改用 Web Component 或轻量级 JS 模块导出渲染函数
import() 真正该用在哪？加载 JS 模块，不是 HTML 文件
当你需要按需加载功能模块（比如编辑器、图表库、路由组件），import() 才是正确选择。它的返回值是 Promise，可配合 await 或 .then() 使用：
async function loadChart() {
const { renderChart } = await import('./charts/bar.js');
renderChart(document.getElementById('chart'));
}
关键点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 路径必须是有效的 JS 模块（
.js后缀，且服务器返回Content-Type: application/javascript） - 不能写
import('./template.html')—— 即使配置了 webpack/vite 的 asset module，底层也是转成 URL 或字符串，不是原生 import - 打包工具（如 Vite）对
import('./xx.vue')的支持，本质是插件转换为 JS 模块，不是浏览器行为 - SSR 环境下，
import()只在客户端执行，服务端需降级处理（比如提前注入或占位）
Vite / Webpack 中“import HTML”其实是障眼法
有些文档提到 import html from './modal.html?raw'，这依赖构建工具插件，并非浏览器能力。Vite 的 ?raw 是将 HTML 文件读为字符串，Webpack 需要 raw-loader。此时你得到的是字符串，不是可执行模块：
import modalHtml from './modal.html?raw';
document.body.insertAdjacentHTML('beforeend', modalHtml); // 仅插入，无脚本执行
容易踩的坑：
- 忘记加
?raw后缀 → 构建失败或导入 undefined - HTML 中有相对路径（如
<img src="./icon.png">），在插入后路径相对于当前页面，可能 404 - 多人协作时，有人误删
?raw，本地能跑、CI 报错，排查困难 - 这种写法让 HTML 失去独立预览和 SEO 能力，适合纯 UI 片段，不适合内容型 HTML
真正难的不是怎么写那行 import()，而是想清楚：这个“HTML”到底承载的是内容、模板，还是交互逻辑。混用加载方式会让后续维护成本陡增，尤其当团队开始加 TypeScript 类型、做 SSR、切微前端时。
