feat(gatsby): enable lazy images by default (#28743)

* feat(gatsby): enable lazy images by default

* revert changes to flags.ts

* Keep disabled in CI

Author: vladar

packages/gatsby-plugin-sharp/src/gatsby-node.js

@@ -3,45 +3,15 @@ const {
   // queue: jobQueue,
   // reportError,
   _unstable_createJob,
+  _lazyJobsEnabled,
 } = require(`./index`)
 const { pathExists } = require(`fs-extra`)
-const { slash, isCI } = require(`gatsby-core-utils`)
-const { trackFeatureIsUsed } = require(`gatsby-telemetry`)
+const { slash } = require(`gatsby-core-utils`)
 const { getProgressBar, createOrGetProgressBar } = require(`./utils`)
 
 const { setPluginOptions } = require(`./plugin-options`)
 const path = require(`path`)
 
-function prepareLazyImagesExperiment(reporter) {
-  if (!process.env.GATSBY_EXPERIMENTAL_LAZY_IMAGES) {
-    return
-  }
-  if (process.env.gatsby_executing_command !== `develop`) {
-    // We don't want to ever have this flag enabled for anything other than develop
-    // in case someone have this env var globally set
-    delete process.env.GATSBY_EXPERIMENTAL_LAZY_IMAGES
-    return
-  }
-  if (isCI()) {
-    delete process.env.GATSBY_EXPERIMENTAL_LAZY_IMAGES
-    reporter.warn(
-      `Lazy Image Processing experiment is not available in CI environment. Continuing with regular mode.`
-    )
-    return
-  }
-  // We show a different notice for GATSBY_EXPERIMENTAL_FAST_DEV umbrella
-  if (!process.env.GATSBY_EXPERIMENTAL_FAST_DEV) {
-    reporter.info(
-      `[gatsby-plugin-sharp] The lazy image processing experiment is enabled`
-    )
-  }
-  trackFeatureIsUsed(`LazyImageProcessing`)
-}
-
-exports.onPreInit = ({ reporter }) => {
-  prepareLazyImagesExperiment(reporter)
-}
-
 // create the progressbar once and it will be killed in another lifecycle
 const finishProgressBar = () => {
   const progressBar = getProgressBar()
@@ -53,7 +23,7 @@ const finishProgressBar = () => {
 exports.onPostBuild = () => finishProgressBar()
 
 exports.onCreateDevServer = async ({ app, cache, reporter }) => {
-  if (!process.env.GATSBY_EXPERIMENTAL_LAZY_IMAGES) {
+  if (!_lazyJobsEnabled()) {
     finishProgressBar()
     return
   }

packages/gatsby-plugin-sharp/src/index.js

@@ -1,6 +1,7 @@
 const sharp = require(`./safe-sharp`)
 const { generateImageData } = require(`./image-data`)
 const imageSize = require(`probe-image-size`)
+const { isCI } = require(`gatsby-core-utils`)
 
 const _ = require(`lodash`)
 const fs = require(`fs-extra`)
@@ -151,6 +152,17 @@ function createJob(job, { reporter }) {
   return promise
 }
 
+function lazyJobsEnabled() {
+  return (
+    process.env.gatsby_executing_command === `develop` &&
+    !isCI() &&
+    !(
+      process.env.ENABLE_GATSBY_EXTERNAL_JOBS === `true` ||
+      process.env.ENABLE_GATSBY_EXTERNAL_JOBS === `1`
+    )
+  )
+}
+
 function queueImageResizing({ file, args = {}, reporter }) {
   const fullOptions = healOptions(getPluginOptions(), args, file.extension)
   const {
@@ -170,13 +182,7 @@ function queueImageResizing({ file, args = {}, reporter }) {
       inputPaths: [file.absolutePath],
       outputDir,
       args: {
-        isLazy:
-          !(
-            process.env.ENABLE_GATSBY_EXTERNAL_JOBS === `true` ||
-            process.env.ENABLE_GATSBY_EXTERNAL_JOBS === `1`
-          ) &&
-          process.env.gatsby_executing_command === `develop` &&
-          !!process.env.GATSBY_EXPERIMENTAL_LAZY_IMAGES,
+        isLazy: lazyJobsEnabled(),
         operations: [
           {
             outputPath: relativePath,
@@ -244,13 +250,7 @@ function batchQueueImageResizing({ file, transforms = [], reporter }) {
         file.internal.contentDigest
       ),
       args: {
-        isLazy:
-          !(
-            process.env.ENABLE_GATSBY_EXTERNAL_JOBS === `true` ||
-            process.env.ENABLE_GATSBY_EXTERNAL_JOBS === `1`
-          ) &&
-          process.env.gatsby_executing_command === `develop` &&
-          !!process.env.GATSBY_EXPERIMENTAL_LAZY_IMAGES,
+        isLazy: lazyJobsEnabled(),
         operations,
         pluginOptions: getPluginOptions(),
       },
@@ -341,7 +341,7 @@ async function generateBase64({ file, args = {}, reporter }) {
     info = result.info
   } catch (err) {
     reportError(
-      `Failed to process image ${file.absolutePath}. 
+      `Failed to process image ${file.absolutePath}.
 It is probably corrupt, so please try replacing it.  If it still fails, please open an issue with the image attached.`,
       err,
       reporter
@@ -773,3 +773,4 @@ exports.getImageSize = getImageSize
 exports.getImageSizeAsync = getImageSizeAsync
 exports.stats = stats
 exports._unstable_createJob = createJob
+exports._lazyJobsEnabled = lazyJobsEnabled