Deferred JS that bundles CSS blocks rendering. #2576

jonnyarnold · 2019-01-24T23:12:55Z

First of all - thanks for Parcel, I'm having a great time with it!

I'd like to show a "Loading" indicator on my page while my main application is being loaded:

index.html

<body>
  <p>Loading...</p>
  <script defer src="./app.js"></script>
</body>

app.js

import * as React from "react"
import css from "./style.css"
// ...

style.css

.app {
  margin: auto;
}

When Parcel compiles index.html, it injects an extra CSS tag for the deferred JavaScript. Because CSS blocks rendering of the page, the Loading indicator is never shown.

Current Behaviour

When compiled, index.html looks like this:

<head>
  <link rel="stylesheet" href="123.css" />
</head>
<body>
  <p>Loading...</p>
  <script defer src="./app.js"></script>
</body>

🤔 Expected Behavior

For deferred JavaScript, CSS tags should be added asynchronously:

<head>
  <link rel="preload" href="123.css" as="style" />
</head>
<body>
  <p>Loading...</p>
  <script defer src="./app.js"></script>
</body>

jonnyarnold · 2019-01-25T09:37:45Z

I've done a little bit more digging on this and it looks like rel="preload" isn't supported by all browsers, so we might have to use loadCSS for this instead of the example given.

DeMoorJasper added the 🙋‍♀️ Feature label Jan 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Deferred JS that bundles CSS blocks rendering. #2576

Deferred JS that bundles CSS blocks rendering. #2576

jonnyarnold commented Jan 24, 2019 •

edited

jonnyarnold commented Jan 25, 2019

Deferred JS that bundles CSS blocks rendering. #2576

Deferred JS that bundles CSS blocks rendering. #2576

Comments

jonnyarnold commented Jan 24, 2019 • edited

Current Behaviour

🤔 Expected Behavior

jonnyarnold commented Jan 25, 2019

jonnyarnold commented Jan 24, 2019 •

edited