HTML怎么做nomodule降级_HTML nomodule旧浏览器降级方案【整理】-html教程-PHP中文网

nomodule 不是降级开关而是加载过滤器，仅旧浏览器执行且现代浏览器完全不下载；必须与 type="module" 成对使用，否则新旧用户均可能白屏。

html怎么做nomodule降级_html nomodule旧浏览器降级方案【整理】

nomodule 不是降级开关，而是加载过滤器：只在不支持 type="module" 的浏览器中执行，现代浏览器根本不会下载它。单独用 nomodule 会导致旧用户没脚本可执行，现代用户反而加载了两份。

为什么 `nomodule` 单独用会失效

IE11、Android 4.4 WebView 等老环境确实会执行 <script nomodule src="legacy.js"></script>，但 Chrome/Firefox/Safari 从不下载也不执行它——连网络请求都不会发。如果你只写了这一行，现代用户什么 JS 都没加载；如果还漏掉了 type="module" 脚本，旧用户也白屏。

IE11 完全忽略 nomodule 属性（不报错，也不执行），但它识别不了 type="module"，所以只靠 nomodule 无法覆盖它
老浏览器不支持 async/defer 的精细控制，nomodule 脚本默认同步阻塞解析，必须压缩+内联关键逻辑
构建产物里若把 nomodule 脚本打包进现代 bundle，就彻底失去意义——它必须是独立、编译后的 IIFE/UMD 格式

`type="module"` 和 `nomodule` 必须成对出现

两者不是“主备”，而是互斥的加载通道：现代浏览器走左边，旧浏览器走右边，中间没有交集。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

顺序建议：先写 <script type="module" src="app.mjs"></script>，再写 <script nomodule src="legacy-bundle.js"></script>（DOM 顺序不影响逻辑，但符合直觉）
app.mjs 必须是合法 ES 模块：含 import/export，不能有 document.write，且默认 defer 行为不可取消
legacy-bundle.js 必须不含任何现代语法：不能用 const、箭头函数、Promise、fetch——nomodule 不管语法，只管加载
动态 import() 在旧版构建中容易残留，需确认 Babel 或 Webpack 已启用 dynamic-import-node 插件并正确转译

旧浏览器执行 `nomodule` 脚本时的真实限制

即使成功加载了 legacy-bundle.js，它仍可能在 IE8–IE10 中崩溃，因为这些环境连基础 API 都不支持。

querySelector、classList、addEventListener 在 IE8 中不存在，必须降级为 getElementById、className、attachEvent
ES6+ 语法（如模板字符串、解构）必须经 Babel 转译到 ES5，且目标设为 ie 9 或更低（ie 8 需额外处理 JSON、Array.prototype.forEach 等）
若用到 localStorage，IE6/7 需 fallback 到 userData behavior，且要手动调用 load()/save()，不能依赖自动持久化
不要在 nomodule 脚本里做 UA 判断再加载 polyfill——旧浏览器解析速度慢，多一层异步加载极易超时或失败