Chrome becomes unresponsive for 30+ seconds after refreshing app (w/ dev tools open)

Question

When I open an app I'm working on in Chrome, for about 30 seconds, all of Chrome's UI elements are unresponsive. The developer tools are completely frozen and the refresh/back buttons act responsive (hover/active states) but they don't function. After about 30 seconds, all of the actions I attempted happen all at once.

My application is not blocking and seems to function completely fine. This isn't an issue in other similar apps I've been running though.

My only guess is that my app is doing something on startup that's causing this, so here's the startup code:

entry.js

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

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

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"));

Edits:

I just tested the app in Firefox and didn't run into any issues

This issue seems to only appear when I refresh the app while the developer tools are open.

Answer 1

Try disabling source maps. Source maps are only loaded when the developer tools are open.

I'm not sure why they would cause such a latency. Perhaps the browser freezes while it loads and parses source maps? If so, there's probably something wrong with them.

You could try to use different source map types to pinpoint the exact cause of your issue.