Flutter Web 执行 hot reload 时浏览器空白无响应该如何处理？

你出现该问题的核心原因是Firebase JS SDK 版本不统一，你引入的多个Firebase依赖分别使用了7.14.2、8.6.1、8.7.1三个不同版本，版本冲突会导致全局firebase对象初始化异常，进而阻塞后续main.dart.js的加载，最终触发热重载时页面空白无响应。

• 第一步：统一所有Firebase JS SDK的版本，建议全部调整为一致的8.x版本，比如统一使用8.7.1，避免跨版本API不兼容问题
• 第二步：调整后清空浏览器缓存，关闭现有调试窗口后重新启动Flutter Web调试服务，再测试热重载功能
• 可选优化：如果不需要在调试阶段使用service worker，可以在启动调试时添加--no-service-worker参数，避免缓存干扰热重载逻辑

修正后的参考代码 #

<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-performance.js"></script>

<script>
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
        apiKey: "****",
        authDomain: "a***",
        projectId: "a***",
        storageBucket: "****",
        messagingSenderId: "**",
        appId: "****",
        measurementId: "***"
    };

    firebase.initializeApp(firebaseConfig)
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Danny Barahona