perf(gatsby-plugin-image): Optimise image size functions (#27544)

* perf(gatsby-plugin-image): Optimise image size functions * Add test
gatsbyjs · Oct 19, 2020 · 8752477 · 8752477
1 parent 47d8041
commit 8752477
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js
@@ -28,6 +28,7 @@ const {
   fixed,
   queueImageResizing,
   getImageSize,
+  getImageSizeAsync,
   stats,
   setBoundActionCreators,
 } = require(`../`)
@@ -614,6 +615,23 @@ describe(`gatsby-plugin-sharp`, () => {
 
       expect(result).toMatchSnapshot()
     })
+
+    it(`handles padding bytes correctly in async version`, async () => {
+      const result = await getImageSizeAsync(
+        getFileObject(path.join(__dirname, `images/padding-bytes.jpg`))
+      )
+
+      expect(result).toMatchInlineSnapshot(`
+        Object {
+          "hUnits": "px",
+          "height": 1000,
+          "mime": "image/jpeg",
+          "type": "jpg",
+          "wUnits": "px",
+          "width": 746,
+        }
+      `)
+    })
   })
 
   describe(`tracedSVG`, () => {

diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js
@@ -20,16 +20,36 @@ const duotone = require(`./duotone`)
 const { IMAGE_PROCESSING_JOB_NAME } = require(`./gatsby-worker`)
 
 const imageSizeCache = new Map()
+
+const getImageSizeAsync = async file => {
+  if (
+    process.env.NODE_ENV !== `test` &&
+    imageSizeCache.has(file.internal.contentDigest)
+  ) {
+    return imageSizeCache.get(file.internal.contentDigest)
+  }
+  const input = fs.createReadStream(file.absolutePath)
+  const dimensions = await imageSize(input)
+
+  if (!dimensions) {
+    reportError(
+      `gatsby-plugin-sharp couldn't determine dimensions for file:\n${file.absolutePath}\nThis file is unusable and is most likely corrupt.`,
+      ``
+    )
+  }
+
+  imageSizeCache.set(file.internal.contentDigest, dimensions)
+  return dimensions
+}
+// Remove in next major as it's really slow
 const getImageSize = file => {
   if (
     process.env.NODE_ENV !== `test` &&
     imageSizeCache.has(file.internal.contentDigest)
   ) {
     return imageSizeCache.get(file.internal.contentDigest)
   } else {
-    const dimensions = imageSize.sync(
-      toArray(fs.readFileSync(file.absolutePath))
-    )
+    const dimensions = imageSize.sync(fs.readFileSync(file.absolutePath))
 
     if (!dimensions) {
       reportError(
@@ -657,7 +677,7 @@ async function fixed({ file, args = {}, reporter, cache }) {
   sizes.push(options[fixedDimension])
   sizes.push(options[fixedDimension] * 1.5)
   sizes.push(options[fixedDimension] * 2)
-  const dimensions = getImageSize(file)
+  const dimensions = await getImageSizeAsync(file)
 
   const filteredSizes = sizes.filter(size => size <= dimensions[fixedDimension])
 
@@ -763,16 +783,6 @@ async function fixed({ file, args = {}, reporter, cache }) {
   }
 }
 
-function toArray(buf) {
-  var arr = new Array(buf.length)
-
-  for (var i = 0; i < buf.length; i++) {
-    arr[i] = buf[i]
-  }
-
-  return arr
-}
-
 exports.queueImageResizing = queueImageResizing
 exports.resize = queueImageResizing
 exports.base64 = base64
@@ -783,4 +793,5 @@ exports.resolutions = fixed
 exports.fluid = fluid
 exports.fixed = fixed
 exports.getImageSize = getImageSize
+exports.getImageSizeAsync = getImageSizeAsync
 exports.stats = stats