为什么未使用我的预取脚本？ （webpack）

Question

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

我已经发布了每个请求的标头的两个屏幕快照。预取请求的标头（请求made by webpack）具有不同的Accept值。 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，这样也将停止在浏览器中缓存的脚本。