feat(gatsby): enable lazy images by default

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

@@ -151,6 +151,16 @@ function createJob(job, { reporter }) {
   return promise
 }
 
+function lazyJobsEnabled() {
+  return (
+    process.env.gatsby_executing_command === `develop` &&
+    !(
+      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 +180,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 +248,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 +339,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 +771,4 @@ exports.getImageSize = getImageSize
 exports.getImageSizeAsync = getImageSizeAsync
 exports.stats = stats
 exports._unstable_createJob = createJob
+exports._lazyJobsEnabled = lazyJobsEnabled

packages/gatsby/src/utils/flags.ts

@@ -71,7 +71,6 @@ const activeFlags: Array<IFlag> = [
     includedFlags: [
       `DEV_SSR`,
       `QUERY_ON_DEMAND`,
-      `LAZY_IMAGES`,
       `PRESERVE_FILE_DOWNLOAD_CACHE`,
       `PRESERVE_WEBPACK_CACHE`,
     ],
@@ -130,34 +129,6 @@ const activeFlags: Array<IFlag> = [
       }
     },
   },
-  {
-    name: `LAZY_IMAGES`,
-    env: `GATSBY_EXPERIMENTAL_LAZY_IMAGES`,
-    command: `develop`,
-    telemetryId: `LazyImageProcessing`,
-    experimental: false,
-    description: `Don't process images during development until they're requested from the browser. Speeds starting the develop server. Requires [email protected] or above.`,
-    umbrellaIssue: `https://gatsby.dev/lazy-images-feedback`,
-    noCI: true,
-    testFitness: (): fitnessEnum => {
-      // Take a 10% of slice of users.
-      if (sampleSiteForExperiment(`QUERY_ON_DEMAND`, 10)) {
-        const semverConstraints = {
-          // Because of this, this flag will never show up
-          "gatsby-plugin-sharp": `>=2.10.0`,
-        }
-        if (satisfiesSemvers(semverConstraints)) {
-          return `OPT_IN`
-        } else {
-          // gatsby-plugi-sharp is either not installed or not new enough so
-          // just disable — it won't work anyways.
-          return false
-        }
-      } else {
-        return true
-      }
-    },
-  },
   {
     name: `PRESERVE_WEBPACK_CACHE`,
     env: `GATSBY_EXPERIMENTAL_PRESERVE_WEBPACK_CACHE`,