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.

Sign up for GitHub

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

Jump to bottom

perf(gatsby-source-contentful): prevent redundant fs/remote fetches for base64 #28438

Merged
merged 3 commits into from
Dec 2, 2020
Merged

perf(gatsby-source-contentful): prevent redundant fs/remote fetches for base64 #28438

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7f55d45
perf(gatsby-source-contentful): add inFlight check for base64 fetches
pvdz Dec 2, 2020
e9f30ae
Add resolved map to return data sync when possible
pvdz Dec 2, 2020
0d5e3a6
Merge branch 'master' into base64inflight
pvdz Dec 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 38 additions & 3 deletions packages/gatsby-source-contentful/src/extend-node-type.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ const REMOTE_CACHE_FOLDER =
path.join(process.cwd(), `.cache/remote_cache`)
const CACHE_IMG_FOLDER = path.join(REMOTE_CACHE_FOLDER, `images`)

// Promises that rejected should stay in this map. Otherwise remove promise and put their data in resolvedBase64Cache
const inFlightBase64Cache = new Map()
// This cache contains the resolved base64 fetches. This prevents async calls for promises that have resolved.
// The images are based on urls with w=20 and should be relatively small (<2kb) but it does stick around in memory
const resolvedBase64Cache = new Map()

const {
ImageFormatType,
ImageResizingBehavior,
Expand All @@ -53,11 +59,26 @@ const isImage = image =>
_.get(image, `file.contentType`)
)

// Note: this may return a Promise<body>, body (sync), or null
const getBase64Image = imageProps => {
if (!imageProps) return null
if (!imageProps) {
return null
}

const requestUrl = `https:${imageProps.baseUrl}?w=20`

// Prefer to return data sync if we already have it
const alreadyFetched = resolvedBase64Cache.get(requestUrl)
if (alreadyFetched) {
return alreadyFetched
}

// If already in flight for this url return the same promise as the first call
const inFlight = inFlightBase64Cache.get(requestUrl)
if (inFlight) {
return inFlight
}

// Note: sha1 is unsafe for crypto but okay for this particular case
const shasum = crypto.createHash(`sha1`)
shasum.update(requestUrl)
Expand All @@ -70,15 +91,29 @@ const getBase64Image = imageProps => {

if (fs.existsSync(cacheFile)) {
// TODO: against dogma, confirm whether readFileSync is indeed slower
return fs.promises.readFile(cacheFile, `utf8`)
const promise = fs.promises.readFile(cacheFile, `utf8`)
inFlightBase64Cache.set(requestUrl, promise)
return promise.then(body => {
inFlightBase64Cache.delete(requestUrl)
resolvedBase64Cache.set(requestUrl, body)
return body
})
}

return new Promise(resolve => {
const promise = new Promise(resolve => {
base64Img.requestBase64(requestUrl, (a, b, body) => {
// TODO: against dogma, confirm whether writeFileSync is indeed slower
fs.promises.writeFile(cacheFile, body).then(() => resolve(body))
})
})

inFlightBase64Cache.set(requestUrl, promise)

return promise.then(body => {
inFlightBase64Cache.delete(requestUrl)
resolvedBase64Cache.set(requestUrl, body)
return body
})
}

const getBasicImageProps = (image, args) => {
Expand Down