Flutter Web应用中main.dart.js重复加载导致性能问题排查求助

问题原因 #

• Flutter Web默认生成的index.html里，已经自带了一段加载无版本号main.dart.js的脚本（一般在body底部），你额外写的loadMainDartJs函数又手动加载了带版本号的同文件，两者叠加就导致了重复加载。
• 另外如果scriptLoaded变量没在全局作用域提前声明，可能会让函数里的判断失效，极端情况下触发重复执行。

修复方案 #

方案1：移除默认加载脚本，保留自定义版本化加载逻辑 #

1. 打开web/index.html，找到底部默认的加载代码：

   <script src="main.dart.js" type="application/javascript"></script>
   

   直接删掉这一行。
2. 把scriptLoaded变量提到函数外全局声明，避免作用域问题导致判断失效：

   let scriptLoaded = false;
   
   function loadMainDartJs() {
     if (scriptLoaded) {
       return;
     }
     scriptLoaded = true;
     const scriptTag = document.createElement('script');
     scriptTag.src = 'main.dart.js?v=2.1.8+87_1';
     scriptTag.type = 'application/javascript';
     document.body.append(scriptTag);
   }
   

3. 确认loadMainDartJs只在页面初始化时调用一次，比如绑定到DOMContentLoaded事件：

   document.addEventListener('DOMContentLoaded', loadMainDartJs);
   

方案2：直接修改默认脚本添加版本号 #

如果不需要自定义加载逻辑，直接改默认的脚本标签，给src加上版本号就行，这样既保留Flutter默认加载机制，又能控制缓存：

<script src="main.dart.js?v=2.1.8+87_1" type="application/javascript"></script>

同时删掉你自己写的loadMainDartJs函数和相关调用，避免冲突。

额外检查项 #

• 排查有没有第三方脚本、浏览器插件或调试工具意外触发重复加载。
• 开发环境下用热重载/热重启时，偶尔出现的重复加载可能是调试机制导致，打包成生产版本后再验证是否消失。

内容的提问来源于stack exchange，提问作者Dhruvit Salat