Question

我是一名React新手，试图学习如何将Flask应用与React集成。我发现每当我对React .js文件进行更改时，我的bundle.js都会重新编译这些更改，但我的浏览器中却没有这些更改。

要复制，请从this Github repo克隆源代码。按照说明进行设置，并确保从虚拟环境运行webpack --watch和python app.py。它应该启动一个可以在localhost:5000访问的简单Web服务器。

访问Chrome时，您应该会看到此屏幕：

接下来，转到您的Hello.js文件并进行一些随机编辑，例如，将Hello World!更改为Hello everyone!。根据我所学到的，webpack --watch应该注意听取更改和重新编译，这样做：如果你进入bundle.js，你会看到更改已被重新编译：

var Hello = _react2.default.createClass({
  displayName: 'Hello',
  render: function render() {
    return _react2.default.createElement(
      'h1',
      null,
      'Hello, everyone!'
    );
  }
});

但是，当您刷新浏览器时，您将获得与以前完全相同的消息（Hello World）。当我检查Chrome正在使用的来源bundle.js时，我发现它仍然使用我的旧代码：。

我的理论是Chrome正在使用某种缓存？但我一直在玩这个约一个小时，我无法让bundle.js更新。

是什么导致我的浏览器加载bundle.js文件？

编辑：我已重新加载，现在更改已应用于我的浏览器屏幕。但是，刷新和更新似乎需要特别长的时间 - 至少4-5分钟。有什么办法缩短这个时间框架吗？

Answer 1

是的，chrome会缓存此文件。它总是有相同的名字您可以通过打开开发工具并在“网络”选项卡中设置Disable cache标记来阻止缓存

但请注意，您需要某种缓存防止生产方法，因为您的用户不会设置此标记我建议在包名中使用md5哈希。

Answer 2

在Chrome中有一个禁用缓存的设置，（F12打开开发工具，转到设置）：

或者你可以将+ f5转换为刷新等。

Answer 3

除了在检查器中禁用缓存外，您还可以按住Refresh图标并选择第三个选项＆＃34; Empty Cache and Hard Reload＆＃34;刷新缓存。

此外，有时在浏览器中点击脚本的URL会有所帮助： https://yourhost.com/bundle.js

浏览器从Webpack

3 个答案: