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

Question

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

我将 Stimulus 与 Turbolinks 一起使用，我需要在控制器中动态导入许多 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">放在头部。 问候