本文详解 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 初始化机制。关键变更如下：
- ❌ 移除旧脚本：
<script src="main.dart.js" type="application/javascript"></script>
- ✅ 替换为标准初始化链：
<script> // serviceWorkerVersion 由 flutter build 注入，请勿手动修改 var serviceWorkerVersion = null; </script> <script src="flutter.js" defer></script>
同时，index.html
中必须包含 flutter.js 脚本，它会自动注入 _flutter.loader 等核心 API，并确保 serviceWorkerVersion 正确传递。✅ 完整可运行 index.html 示例（适配 Flutter ≥ 3.10）
<html>
<head>
<base href="$FLUTTER_BASE_HREF">
<title>My App</title>
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="icons/favicon.png">
<link rel="manifest" href="manifest.json">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 关键：注入 serviceWorkerVersion 并加载 flutter.js -->
<script>
var serviceWorkerVersion = null;
</script>
<script src="flutter.js" defer></script>
</head>
<body class="main">
<!-- 自定义加载页 -->
<div id="loading">
<style>
body { margin: 0; padding: 0; position: fixed; inset: 0; overflow: hidden; }
#loading { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
#loading img { max-width: 350px; margin: 20px; opacity: 1; }
</style>
<img src="icons/splash-icon.png" alt="Loading..." />
</div>
<!-- 启动逻辑 -->
<script>
window.addEventListener('load', () => {
_flutter.loader.loadEntrypoint({
serviceWorker: { serviceWorkerVersion },
onEntrypointLoaded: async (engineInitializer) => {
try {
const appRunner = await engineInitializer.initializeEngine();
// ✅ 安全移除加载页：使用可选链 + remove()
document.getElementById('loading')?.remove();
await appRunner.runApp();
} catch (e) {
console.error('Failed to initialize Flutter engine:', e);
// 可选：降级显示错误提示
document.getElementById('loading')?.textContent = 'App failed to load.';
}
}
});
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- 不要手动修改 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 过渡体验。
