Rails+Turbolinks+Vite环境下JS函数调用时机问题咨询

原因分析 #

Vite 默认采用异步加载脚本的方式，哪怕你将vite_javascript_tag放在 partial 之前，它也不会阻塞 HTML 的渲染流程。这就导致 partial 内的脚本先执行时，window.myFunction还未被挂载到全局对象上。而之前 Webpack 环境下的同步加载逻辑，在 Vite 的异步模式下不再适用。

可行方案 #

方案1：监听 Vite 初始化完成事件 #

Vite Rails 会在客户端脚本加载并初始化完成后，派发vite:ready事件。我们可以在 partial 中结合这个事件，同时处理函数已存在的场景（比如 Turbolinks 回退时脚本已加载完成）：

# layouts/_partial.html.erb
<script>
function runMyFunction() {
  if (typeof window.myFunction === 'function') {
    window.myFunction();
    // 执行后移除监听，避免重复触发
    document.removeEventListener('vite:ready', runMyFunction);
  }
}

// 先检查函数是否已存在，存在直接执行
runMyFunction();
// 若不存在，监听vite:ready事件
document.addEventListener('vite:ready', runMyFunction);
</script>

这个方法只会在函数可用时执行一次，且不会在每次 Turbolinks 导航时重复触发，仅在 partial 渲染时生效。

方案2：避免全局挂载，改用 Vite 动态导入 #

更符合 Vite ESM 规范的做法是直接在 partial 的脚本中动态导入函数，不需要挂载到window：

首先修改application.js，移除全局挂载逻辑：

// application.js 移除 window.myFunction = myFunction;

然后在 partial 中动态导入并执行：

# layouts/_partial.html.erb
<script type="module">
import myFunction from 'myJSModule';
myFunction();
</script>

Vite 会自动处理模块的加载顺序，确保函数可用时再执行，同时这种方式不会污染全局作用域，也能适配 Turbolinks 的导航场景。

方案3：强制同步加载 Vite 脚本（不推荐） #

如果你需要保持类似 Webpack 的同步加载行为，可以给vite_javascript_tag添加async: false参数，强制脚本同步加载，阻塞后续 HTML 渲染：

# application.html.erb
<%= vite_javascript_tag "application", 'data-turbolinks-track': "reload", async: false %>
<%= render "layouts/partial" %>

注意：这种方式会降低页面加载性能，违背 Vite 异步加载的设计初衷，仅作为临时兼容方案使用。

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