本文详解 flutter web 启动后动态移除自定义加载页（如 `#loading` 元素）的完整方案，重点解决因初始化脚本过时导致 `remove()` 失效的问题，并提供兼容最新 flutter 版本的标准化实现。
在 Flutter Web 应用中，为提升用户体验，常需在 Flutter 引擎初始化完成前显示自定义加载页（如带 Logo 的 #loading 容器）。但许多开发者发现：即使在 onEntrypointLoaded 回调中调用 document.getElementById('loading')?.remove()，加载元素仍残留于 DOM —— 这通常并非代码逻辑错误，而是项目初始化脚本与当前 Flutter SDK 版本不兼容所致。
✅ 正确做法：使用官方推荐的现代初始化流程
Flutter 自 3.10+ 版本起已弃用直接引用 main.dart.js 的旧式加载方式，转而采用模块化、可扩展的 flutter.js 初始化机制。关键变更如下：
- ❌ 移除旧脚本：
- ✅ 替换为标准初始化链：
同时，index.html
中必须包含 flutter.js 脚本，它会自动注入 _flutter.loader 等核心 API，并确保 serviceWorkerVersion 正确传递。✅ 完整可运行 index.html 示例（适配 Flutter ≥ 3.10）
My App @@##@@
⚠️ 注意事项与最佳实践
- 不要手动修改 serviceWorkerVersion：该变量由 flutter build web 自动注入，硬编码会导致 PWA 更新失效。
- 确保 flutter.js 存在：若缺失，请通过 flutter create . --platforms=web 重建 Web 支持（该命令会生成最新版 flutter.js 和标准结构）。
- 移除时机要精准：务必在 initializeEngine() 成功 resolve 后、runApp() 前执行 remove()；若提前操作，DOM 元素可能尚未就绪。
- 增强健壮性：使用 ?.remove() 避免元素不存在时报错；添加 try/catch 捕获引擎初始化异常。
- CSS 隔离建议：将加载页样式内联（如示例所示），避免因 styles.css 加载延迟导致闪屏。
✅ 验证是否生效
构建并本地运行：
立即学习“前端免费学习笔记（深入）”；
flutter build web --release cd build/web && python3 -m http.server 8000
打开 http://localhost:8000，观察 Network 面板中 main.dart.js 是否被 flutter.js 动态加载，且控制台无 Cannot read property 'remove' of null 报错 —— 此时 #loading 将在 Flutter 渲染首帧前被干净移除。
遵循此方案，即可稳定、可靠地控制 Flutter Web 启动过程中的 UI 过渡体验。
