刷新应用程序后，Chrome 变得无响应 30 多秒（打开开发工具）

Question

当我在 Chrome 中打开一个应用程序时，大约 30 秒，Chrome 的所有 UI 元素都没有响应。开发人员工具完全冻结，刷新/后退按钮反应灵敏（悬停/活动状态），但它们不起作用。大约 30 秒后，我尝试的所有操作同时发生。

我的应用程序没有阻塞，并且似乎完全正常运行。这在我运行的其他类似应用程序中不是问题。

我唯一的猜测是我的应用程序在启动时做了一些导致这种情况的事情，所以这是启动代码：

入口.js

import "babel-polyfill";
require("./index.html"); // Forces webpack to include our html file

window.onload = () => require("./app");

应用程序.js

import React from "react";
import ReactDOM from "react-dom";
import Application from "components/application";
import store from "store";
import actions from "store/actions";
import storage from "storage";

require("style/normalize.scss");
require("style/base.scss");

const loadedState = storage.get("state");

if(!!loadedState) {
  store.dispatch({
    type: actions.LOAD_STATE,
    state: loadedState
  });
}

store.subscribe(() => {
  console.time("Saving");
  storage.set("state", store.getState());
  console.timeEnd("Saving");
});

ReactDOM.render(<Application/>, document.getElementById("game-container"));

编辑：

我刚刚在 Firefox 中测试了该应用程序并没有遇到任何问题

这个问题似乎只有在开发者工具打开的情况下刷新应用程序时才会出现。

Answer 1

尝试禁用源映射。仅当开发人员工具打开时才加载源映射。

我不确定为什么它们会导致这样的延迟。也许浏览器在加载和解析源映射时会冻结？如果是这样，他们可能有问题。

您可以尝试使用不同的源映射类型来查明问题的确切原因。