能否强制<script type="module">脚本以同步方式运行？

首先明确：无法直接强制type="module"的脚本以完全同步的方式运行。这是因为ES模块脚本在浏览器中的加载和执行逻辑由规范定义——默认情况下，模块脚本会像带defer属性的普通脚本一样：并行加载资源，不阻塞HTML解析，待DOM解析完成后按在HTML中的顺序执行。即使添加async属性，也只是改变执行时机为“加载完成立即执行”，无法切换到同步阻塞模式。

针对你在遗留应用中集成ViteJS遇到的竞态问题，这里提供几个可行的解决方案：

方案1：将Vite输出转为非模块格式 #

如果不需要ES模块的特性，可以调整Vite的打包配置，让其输出IIFE或UMD格式的传统脚本。这样你就可以去掉type="module"属性，将脚本作为普通同步脚本引入：

<!-- 遗留脚本 -->
<script src="legacy-code.js"></script>
<!-- Vite输出的非模块脚本，会同步执行 -->
<script src="vite-bundled-script.js"></script>

Vite配置示例（vite.config.js）：

export default {
  build: {
    lib: {
      entry: 'src/main.js',
      formats: ['iife'],
      name: 'MyViteApp'
    }
  }
}

方案2：手动控制模块脚本的执行时机 #

保留模块格式，但通过代码监听遗留脚本的执行状态，待旧代码完全就绪后再加载模块：

// 监听遗留代码的执行完成标志（比如旧代码暴露的全局变量）
function waitForLegacyReady() {
  return new Promise(resolve => {
    const checkInterval = setInterval(() => {
      if (window.LegacyApp && window.LegacyApp.initialized) {
        clearInterval(checkInterval);
        resolve();
      }
    }, 50);
  });
}

// 待遗留代码就绪后加载模块
waitForLegacyReady().then(() => {
  const moduleScript = document.createElement('script');
  moduleScript.type = 'module';
  moduleScript.src = '/path/to/vite-module.js';
  document.body.appendChild(moduleScript);
});

方案3：利用模块脚本的默认执行顺序优化加载逻辑 #

去掉模块脚本的async属性，将其放在所有遗留脚本的末尾。模块脚本的默认行为是按HTML中的顺序执行，且会在所有同步执行的遗留脚本完成后、DOMContentLoaded事件触发前执行。这种方式能最大程度保证执行顺序：

<!-- 所有遗留同步脚本 -->
<script src="legacy-1.js"></script>
<script src="legacy-2.js"></script>

<!-- 模块脚本会在上面的遗留脚本执行完成后再执行 -->
<script type="module" src="vite-module.js"></script>

需要注意的是，async属性会打乱模块脚本的执行顺序，让其加载完成后立即执行，反而容易加剧竞态问题，因此不建议在需要保证顺序的场景下使用。

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