动态 import() 不能直接写在普通 script 标签中，必须在 type="module" 脚本内由 JS 主动调用，且路径须为静态字符串字面量，否则构建工具无法分析、原生环境报错。
动态 import() 不能直接写在 HTML 的 <script></script> 标签里执行，它必须由 JS 主动调用，且运行环境需支持模块系统（现代浏览器）或经构建工具处理（如 Vite/webpack）。硬塞进普通 script 会报 Unexpected token 'import'；写在 type="module" 脚本里却放在顶层，又等效于静态导入，失去“按需”意义。
为什么 <script>import('./a.js')</script> 一定报错
HTML 解析器遇到普通 <script></script> 时，按传统 script 模式执行，import() 表达式根本不被识别为合法语法。这不是路径或拼写问题，是执行上下文错误。即使加了 type="module"，如果把 import() 写在脚本顶层（非函数内），它会在页面加载时立即触发，和 import static 一样阻塞解析、提前下载——违背“动态”本意。
- 错误写法：
<script type="module">import('./chart.js');</script>→ 立即加载，无条件 - 正确起点：
<script type="module" src="main.js"></script>，所有import()放在main.js的事件回调或异步函数中 - 旧版浏览器不支持
import()？那就得靠构建工具降级：Vite 默认转译，Webpack 需确认target和mode配置生效
import() 的路径必须是字符串字面量
你不能拼接、不能变量插值、不能函数返回路径——import(moduleName) 中的 moduleName 必须是静态可分析的字符串，否则构建工具无法生成 chunk，原生环境也会直接报错 Invalid module specifier。
- ✅ 允许：
import('./utils/date.js')、import('/pages/dashboard.mjs') - ❌ 禁止：
import('./' + page + '.js')、import(getPath())、import(`./${name}.js`) - 大小写敏感：开发时路径
./Chart.js，但部署后服务器返回404，很可能只是文件名实际是chart.js（尤其 Windows 开发 macOS 部署） - 扩展名别省：
import('./lib')在原生环境大概率失败，明确写.js或.mjs
如何捕获并定位加载失败的真实原因
import() 返回 Promise，catch 只能捕获模块获取与解析阶段的错误（如 404、MIME 类型错误、语法错误），不包括模块内部运行时报错。而浏览器控制台常只显示模糊的 Failed to fetch dynamically imported module，不带 URL。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 务必在调用前
console.log路径：const path = './charts/report.js'; console.log('loading', path); import(path) - 检查网络面板：筛选
JS类型请求，看对应 URL 是否返回 404 或 406（MIME 不匹配） - 服务端确保返回
Content-Type: text/javascript，哪怕文件扩展名不是.js - 避免在
try/catch外裸奔：import('./x.js').catch(console.error)会抛未捕获异常，影响错误监控
构建工具没配好，import() 就只是个 Promise
Vite 默认将 import() 拆成独立 chunk 并自动注入 script 标签；Webpack 则依赖 optimization.splitChunks（默认开启），但若你手动关了或配了 chunks: 'async' 以外的值，可能合并回主包。
- Vite 用户：基本不用操心，但检查
vite.config.js是否误加了build.rollupOptions.output.manualChunks干扰默认行为 - Webpack 用户：确认
splitChunks.chunks === 'async'（默认值），且没被其他插件覆盖 - 纯原生环境（无构建）：路径必须是相对或绝对 URL，不支持 npm 包名（如
import('lodash')会失败） - 部署时 base 路径不一致？比如开发用
/，部署到子路径/app/，那import('./foo.js')实际请求的是/foo.js而非/app/foo.js—— 需统一配置
最常被忽略的一点：你以为在写“动态”逻辑，但路径写成变量、拼接或模板字符串，构建工具就完全无法切分，最终所有代码还是打在一个 bundle 里。动态 import 的威力，一半来自语言特性，另一半死死卡在构建时的静态分析能力上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
