Turbolinks、动态导入（file.js）、d3 重新加载

Question

复制：https://glitch.com/edit/#!/noisy-wax

我正在使用带有 Turbolinks 的 Stimulus，我需要在控制器中动态导入许多 js。

我在main.js 中使用的代码是：

window.Turbolinks.start()

window.application = window.Stimulus.Application.start()

const IsPreviewPage = () => document.documentElement.hasAttribute('data-turbolinks-preview')

const divID = 'about_graphic'

window.application.register("about", class extends window.Stimulus.Controller {
  async initialize () {
    console.log("About, initialize()")

    if (IsPreviewPage()) {
      return
    }  

    const aboutD3 = await import("./about.js")
    aboutD3.loadChart()
  }
})

问题

如果我在图表第一次出现时导航到/about。

然后我导航到/index。

当我返回 /about 页面时，d3 图表会自行重新加载（您可以通过 turbolinks 在预览页面后看到闪烁）。

如何避免重新加载？

在这一个中，我没有使用动态导入并且它不会重新加载：https://glitch.com/edit/#!/mud-shop

Answer 1

解决办法是把<meta name="turbolinks-cache-control" content="no-preview"> 在头上。问候