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