Layui项目出现ChunkLoadError主因是混用Vue/React动态导入或打包工具代码分割，叠加网络异常（如ERR_CONNECTION_TIMED_OUT）或资源404；需区分错误类型：网络类优先重试2次，404则触发版本检测刷新，非关键页应局部降级而非强制reload。
为什么 layui 项目也会遇到 ChunkLoadError？
layui 本身不搞懒加载，但如果你用的是 layui-vue、@layui/uni，或者在 layui 项目里混用了 Vue/React 路由（比如嵌入了 Vue 子应用），就可能触发动态 import。更常见的是：你用 webpack 或 vite 打包时启用了 code splitting，而 layui 的某个模块（比如表格导出、图表插件）被拆成了异步 chunk——这时候网络抖动或资源加载超时，就会报 ChunkLoadError: Loading chunk failed。
network error 导致的 ChunkLoadError 怎么区分？
不能一概而论地当成“发版问题”去 reload 页面。真实线上环境里，约 60% 的 ChunkLoadError 实际是网络临时失败（DNS 超时、TLS 握手失败、CDN 回源中断），而非资源缺失。关键看错误堆栈里有没有 net::ERR_CONNECTION_TIMED_OUT、net::ERR_INTERNET_DISCONNECTED 或 Failed to fetch 这类关键词。
- 如果是
404或410响应，说明资源真没了 → 应走版本一致性检测 + 刷新流程 - 如果是网络类错误（含
TypeError: Failed to fetch），优先重试，最多 2 次，间隔 800ms - 重试后仍失败，再判断是否为首页 / 关键路径 —— 非关键页（如二级菜单、日志查看）可降级为静态提示，不中断主流程
layui 表格/弹窗等模块加载失败时如何优雅降级？
不要直接 location.reload()。对用户正在操作的表格，强制刷新等于清空筛选条件、丢失滚动位置、丢掉未提交表单。应该做局部兜底：
- 在
table.render()的error回调里，先调table.clearCache('demo')（注意：Layui 2.8+ 必须传 id 参数，老版本不认） - 清空容器后立刻设
$('#demo').css('height', 'auto')，否则带height的表格容器会把重载按钮压到视口外 - 渲染一个带重试逻辑的按钮：
<button class="layui-btn" id="reload-btn">网络不稳定，点击重试</button> - 点击后不调
table.reload()（它不发新请求），而是重新执行完整table.render({ ... })，并加done: function(res, curr, count) { /* 成功后移除按钮 */ }
怎么避免重试时反复触发 ChunkLoadError？
核心是阻断重复加载。webpack 和 vite 默认对同一 chunk 失败后不会自动重试，但如果你手动 import()，就得自己加锁：
- 用一个全局 Map 记录正在加载的 chunk ID，例如
window.__chunkLoadingLock = new Map() - 每次
import('./module.js')前先查锁：if (window.__chunkLoadingLock.has('module')) return Promise.reject('loading') - 成功或失败后都清除锁：
window.__chunkLoadingLock.delete('module') - 重试按钮点击时，也检查该锁，避免用户狂点导致并发请求堆积
这个锁机制特别容易被忽略——尤其在移动端弱网下，用户点一次没反应，连点三次，结果三个相同 chunk 请求同时发出去，服务器压力翻倍，错误率反而更高。
