Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(gatsby-plugin-netlify): add all .js files from webpack.stats.json to _headers #12521

Merged
merged 3 commits into from
Apr 19, 2019
Merged

fix(gatsby-plugin-netlify): add all .js files from webpack.stats.json to _headers #12521

merged 3 commits into from
Apr 19, 2019

Conversation

mihaiblaga89
Copy link
Contributor

Description

The issue was that only the first file was taken from each key from webpack.stats.json. Modified it to get all of them and render them accordingly.

Related Issues

Fixes to #9828

@lablancas
Copy link

Looking forward to getting this fix. Thanks @mihaiblaga89

@wardpeet wardpeet changed the title #9828 add all the files from webpack.stats.json to _headers fix(gatsby-plugin-netlify): add all the files from webpack.stats.json to _headers Mar 13, 2019
@wardpeet wardpeet added the status: awaiting reviewer response A pull request that is currently awaiting a reviewer's response label Mar 13, 2019
@pieh pieh self-assigned this Apr 19, 2019
@pieh
Copy link
Contributor

pieh commented Apr 19, 2019

Hey @mihaiblaga89! Thanks for your patience with us on this.

Here's example _headers output with this change:

/
  Link: </webpack-runtime-38690a1d9ceb63d36823.js>; rel=preload; as=script
  Link: </styles.1025963f4f2ec7abbad4.css>; rel=preload; as=script
  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
  Link: </app-143317de0d2e0a4686a0.js>; rel=preload; as=script
  Link: </0-84a0c17fb8865c06616b.js>; rel=preload; as=script
  Link: </component---src-pages-index-js-34bdaacb8d3687c4c6c6.js>; rel=preload; as=script

It definitely fixes the problem of grabbing just first chunk. But there is something to potentially adjust:

  • I think we need to filter out css because we do inline it, so preloading css file shouldn't be necessary (I need to verify this). If we do need it in the end we would need to adjust as=script for css files, but this is TBD if it's needed.

@pieh pieh changed the title fix(gatsby-plugin-netlify): add all the files from webpack.stats.json to _headers fix(gatsby-plugin-netlify): add all .js files from webpack.stats.json to _headers Apr 19, 2019
Copy link
Contributor

@pieh pieh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mihaiblaga89!

@pieh pieh added bot: merge on green Gatsbot will merge these PRs automatically when all tests passes and removed status: awaiting reviewer response A pull request that is currently awaiting a reviewer's response labels Apr 19, 2019
@pieh pieh merged commit 983dbd9 into gatsbyjs:master Apr 19, 2019
@gatsbot
Copy link

gatsbot bot commented Apr 19, 2019

Holy buckets, @mihaiblaga89 — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

  1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
  2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

@mihaiblaga89
Copy link
Contributor Author

@pieh Sorry for the late reply, was off the grid for a bit. Thank you too for the filtering, you're right, css is inline.

jcayzac added a commit to jcayzac/gatsby that referenced this pull request Jul 10, 2019
… breaks HTTP/2 push)

This generates the right markup but the Netlify plugin is still broken
(it filters on .js and prevents any other `<link rel="preload">` from making it
into `_headers`)

See:

- gatsbyjs@981bc8c
- gatsbyjs#12521 Bogus PR adding files to `_headers` (has the filter on `.js`)
- gatsbyjs#9828 gatsby-plugin-netlify v2 excludes some link headers
- `from: jc#3330 static-entry.js` search on Discord.
jcayzac added a commit to jcayzac/gatsby that referenced this pull request Jul 10, 2019
This allows injecting critical style without inlining (antipattern in HTTP/2).

```js
// gatsby-browser.js
import(/* webpackPreload: true */ `./src/styles/index.sass`)
```

The above generates a `<link as="style" rel="preload" href="/styles.9b011d582aac2f4be01f.css"/>` tag in
each page's `<head>`.

See:

- gatsbyjs@981bc8c
- gatsbyjs#12521 Bogus PR adding files to `_headers` (has the filter on `.js`)
- gatsbyjs#9828 gatsby-plugin-netlify v2 excludes some link headers
- `from: jc#3330 static-entry.js` search on Discord.

Caveats:

`gatsby-plugin-netlify` doesn't parse `.namedChunkGroups.app.childAssets.preload` in the webpack stats, and simply ignore all assets marked for preloading, so this commit still doesn't enable the expected HTTP/2 behavior on Netlify.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bot: merge on green Gatsbot will merge these PRs automatically when all tests passes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants