js 動態引入js文件。Chrome 每次都要重新發出請求，而不是緩存。

Question

题目描述

现在项目中需要引入一个40多M的JS文件，
需要的时候，JS动态添加script标签引入。
但每次Chrome都是重新去获取一次，而不是缓存。然后我测试的Firefox是没问题的。

相关代码

export function asyncLoadJs(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = url
    document.body.appendChild(script)
    script.onload = () => {
      resolve()
    }
    script.onerror = reject
  })
}

asyncLoadJs('./static/vfs_fonts.min.js')
      .then(() => {
      })
      .catch(() => {
      })

浏览器截图

Chrome

Firefox

请问这是浏览器自身原因吗？

Answer 1

40 M，我滴个乖乖。。。。

你可以在你服务器比如 Nginx 对这个文件设置一下缓存就好了。

Answer 2

检测一下你的谷歌浏览器是否禁用缓存

Answer 3

文件是否缓存是由服务器控制的，需要在返回这个文件的时候带上缓存控制header，例如 Cache-Control:max-age=604800，可以缓存一个星期，也可以使用 ETag 和 If-None-Match，或者 Last-Modified 和 If-Modified-Since 进行协商缓存。https://www.infoq.cn/article/...