javascript - 为什么未使用我的预取脚本？ (网络包)

Question

我试图预取脚本，以便可以渲染（预取）React组件，以便用户更快地导航。我的脚本已被预取，但似乎没有被使用。当我转到另一个页面（例如Look）时，将再次获取Look捆绑包，并且根本没有使用预取的捆绑包。

我已经发布了每个请求的标头的两个屏幕快照。prefetch请求的标头中有一个不同的Accept值（请求made by webpack）。 Cookie值也有所不同，我认为这与Google Analytics（分析）相关，但我认为这不是问题。

键入此命令时，我注意到Chrome中的“预览/响应”选项卡上显示“无法加载响应数据”（请参阅​​第一个屏幕截图），因此我检查了Firefox，那里的响应都相同，但我猜这可能表明怎么了。

TL; DR：为什么未使用我的预取脚本？

我正在使用@loadable/component来预取组件，示例代码：

import loadable from '@loadable/component';
import React from 'react';

const LoadableComponent = loadable(
  () =>
    import(
      /* webpackChunkName: "Look", webpackPrefetch: true */
      '../containers/Look'
    ),
  {
    fallback: <div />,
  },
);

const LookLoadable = () => <LoadableComponent />;

export default LookLoadable;

Answer 1

我只是注意到您将pragma和cache-control设置为no-cache，因此这也将停止在浏览器中缓存的脚本。