jantimon / jantimon/html-webpack-plugin

Preload styles before deferred scripts

Open
#1,813 1 comment 3 reactions 0 assignees View on GitHub
wontfix
Dominant language
JavaScript
Stars
10.7k
Forks
1.3k
Avg merge
1m
Merged PRs (30d)
1

Description

**Is your feature request related to a problem? Please describe.**
Currently HtmlWebpackPlugin inserts script tags before style tags by default. Deferring script execution and blocking styles is reasonable to load the page quickest without any jumping, and placing script tags before style tags means related assets can download asynchronously. However this also causes the browser to initiate script downloads before styles, and often means if a browser only has one connection open, there's an additional delay to loading styles to initiate the connection (especially if an SSL handshake needs to be done). As such, this can cause scripts to load before styles, even if the stylesheet is smaller.

**Describe the solution you'd like**
Using `` tags in advance allows the HTML page to direct the order that assets are downloaded. Luckily with HtmlWebpackPlugin's templating parameters, this is easy to do if someone knows how to. However I don't believe there are any examples that demonstrate this in the repo. I would prefer it as an option, but just documenting this would be helpful for others.

Anyways, here's the workaround I've built to do this manually (insert these into the head tag of the template):

```
<%= htmlWebpackPlugin.files.css.map(url => ``).join('') %>
<%= htmlWebpackPlugin.files.js.map(url => ``).join('') %>
```

**Describe alternatives you've considered**
I've tried moving asset tags around, but since it is ideal that styles block page render while scripts are downloaded concurrently (just after styles begin downloading), I believe this is the most optimal solution.

**Additional context**
Issue #532 alluded to this but didn't show that it improves page downloads nor a concrete example of the impact. In addition, here's a timing graph showing that the second asset encounters a new connection including SSL handshake upon initial load, and that my workaround reduces the download time of the initial CSS:

https://github.com/jantimon/html-webpack-plugin/assets/1804643/a057c9d9-d4b5-43ab-b061-6161ca99cc38

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the repository's template examples and documentation, focusing on the htmlWebpackPlugin.files.css and htmlWebpackPlugin.files.js parameters shown in the issue. Compare the requested option with the manual preload workaround, then verify that the chosen behavior places preload links before deferred scripts and preserves stylesheet loading.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.