v4.15 Release Notes
Welcome to gatsby@4.15.0
release (May 2022 #2)
Key highlights of this release:
Also check out notable bugfixes.
Bleeding Edge: Want to try new features as soon as possible? Install gatsby@next
and let us know if you have any issues.
Script Component
We’re releasing a built-in <Script>
component that aids in loading third-party scripts performantly.
As a familiar React component, migration to the <Script>
component is as simple as importing and capitalizing your existing script tags in most cases:
This will load your script after your page has hydrated by default, offering performance benefits over the native <script>
tag (even with async
or defer
applied).
In our testing so far, we’ve noted a 20% reduction in Total Blocking Time for Gatsbyjs.com by moving 3 third party scripts to use the off-main-thread
strategy via the new component. With the benefit of gradually migrating scripts to the new component, we’ll be able to continue to fine tune scripts to the appropriate strategies, and provide the very best frontend speed to visitors of Gatsbyjs.com.
The Gatsby <Script>
component includes three loading strategies that you can define, allowing a great deal of flexibility via a single strategy
attribute:
post-hydrate
- Loads after the page has hydratedidle
- Loads after the page has become idleoff-main-thread
(experimental) - Loads off the main thread in a web worker via Partytown
In addition, these features are supported out of the box:
- Inline scripts via template literals and the
dangerouslySetInnerHTML
property onLoad
andonError
callbacks forpost-hydrate
andidle
scripts with sources
For full details, see the Gatsby Script reference documentation.
Note - If you are using Jest, you will need to include
gatsby-script
in yourtransformIgnorePatterns
key in your Jest config sincegatsby-script
is an ES module. See the unit testing documentation on Jest configuration for more details.
GraphQL Typegen
In the last v4.14 release we’ve added GraphQL Typegen as an experimental feature. After some bugfixing and improving its documentation the feature is now generally available behind a gatsby-config
option.
Read the GraphQL Typegen guide to learn how you can use it today and continue to give us your feedback in the RFC discussion.
Notable bugfixes & improvements
gatsby
:gatsby-cli
: Default toproduction
NODE_ENV forgatsby serve
to be consistent withgatsby build
, via PR #35693gatsby-source-wordpress
: handle media edit (for example rotation or rename) properly for IMAGE_CDN, via PR #35687gatsby-source-drupal
:
Contributors
A big Thank You to our community who contributed to this release 💜
- chuckreynolds: sitemap plugin readme has incorrect array name reference PR #35659
- admir4l: chore(gatsby, gatsby-cli, gatsby-plugin-sharp): remove old unused UUID dependency PR #35657
- feedm3: fix(gatsby): use correct types for the response headers PR #35633
- alvis: fix(gatsby): correct the types of
createNode
action return PR #32522