Skip to content

limit image processing on dev enviroment #6548

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

LibenHailu
Copy link
Contributor

Description
During development, gatsby-plugin-sharp and image queries trigger Sharp to process and cache all images, which leads to excessive RAM usage and makes the project heavy to run.
This PR fixes #

Notes for Reviewers
Disabling image processing especially placeholders during development can significantly reduce RAM usage.

Signed commits

  • Yes, I signed my commits.

Signed-off-by: Liben Hailu <libenhailu04@gmail.com>
@LibenHailu LibenHailu changed the title limit image processing on deve enviroment limit image processing on dev enviroment Jun 13, 2025
@l5io
Copy link
Contributor

l5io commented Jun 13, 2025

🚀 Preview for commit ffdab29 at: https://684c618cce729a715b08eca8--layer5.netlify.app

@@ -13,7 +13,8 @@ module.exports = {
},
flags: {
FAST_DEV: true,
PARALLEL_SOURCING: true
PARALLEL_SOURCING: true,
PARALLEL_QUERY_RUNNING: true
Copy link
Member

@M-DEV-1 M-DEV-1 Jun 13, 2025

Choose a reason for hiding this comment

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

@LibenHailu could you explain the PARALLEL_QUERY_RUNNING flag? or maybe point me to the docs for this one?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@M-DEV-1 by default gatsby uses single thread to run the graphql quires, It is assumed that this flag helps gatsby to use multiple processes.

gatsbyjs/gatsby#32389

couldn't find it on the latest experiential flag tho here

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/flags.ts

I have 8-core CPU I saw some increase in CPU usage but I have to double check if the thing is working as expected.

@@ -513,7 +514,7 @@ module.exports = {
resolve: "gatsby-plugin-sharp",
options: {
defaults: {
placeholder: "blurred",
placeholder: isDev ? "none" : "blurred",
Copy link
Member

Choose a reason for hiding this comment

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

what would placeholder "none" do when we're in dev environment?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So if the placeholder is set to 'none', Gatsby skips further image processing in development mode. In production, it shows the blurred version until the full image loads.

@vishalvivekm
Copy link
Contributor

@LibenHailu
Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST | 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

@l5io
Copy link
Contributor

l5io commented Jun 16, 2025

🚀 Preview for commit bdea6e0 at: https://684ffafd9867bbbb9f407637--layer5.netlify.app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants