From b818206e253829155c82d7877bf3290bd80c020e Mon Sep 17 00:00:00 2001 From: Vladimir Razuvaev Date: Wed, 23 Dec 2020 21:09:58 +0700 Subject: [PATCH 1/3] feat(gatsby): enable lazy images by default --- .../gatsby-plugin-sharp/src/gatsby-node.js | 36 ++----------------- packages/gatsby-plugin-sharp/src/index.js | 29 ++++++++------- packages/gatsby/src/utils/flags.ts | 29 --------------- 3 files changed, 17 insertions(+), 77 deletions(-) diff --git a/packages/gatsby-plugin-sharp/src/gatsby-node.js b/packages/gatsby-plugin-sharp/src/gatsby-node.js index b34d4736422ec..c8230631abfb1 100644 --- a/packages/gatsby-plugin-sharp/src/gatsby-node.js +++ b/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 } diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index fbe64f9e3bab2..1120c1b301eed 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/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 diff --git a/packages/gatsby/src/utils/flags.ts b/packages/gatsby/src/utils/flags.ts index 45f89746b96fd..7cfbc44cb7c44 100644 --- a/packages/gatsby/src/utils/flags.ts +++ b/packages/gatsby/src/utils/flags.ts @@ -71,7 +71,6 @@ const activeFlags: Array = [ includedFlags: [ `DEV_SSR`, `QUERY_ON_DEMAND`, - `LAZY_IMAGES`, `PRESERVE_FILE_DOWNLOAD_CACHE`, `PRESERVE_WEBPACK_CACHE`, ], @@ -130,34 +129,6 @@ const activeFlags: Array = [ } }, }, - { - 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 gatsby-plugin-sharp@2.10.0 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`, From 384f971d1cd44e2999770febb77bd9fb7ce52bd7 Mon Sep 17 00:00:00 2001 From: Vladimir Razuvaev Date: Tue, 29 Dec 2020 21:11:10 +0700 Subject: [PATCH 2/3] revert changes to flags.ts --- packages/gatsby/src/utils/flags.ts | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/gatsby/src/utils/flags.ts b/packages/gatsby/src/utils/flags.ts index 7cfbc44cb7c44..45f89746b96fd 100644 --- a/packages/gatsby/src/utils/flags.ts +++ b/packages/gatsby/src/utils/flags.ts @@ -71,6 +71,7 @@ const activeFlags: Array = [ includedFlags: [ `DEV_SSR`, `QUERY_ON_DEMAND`, + `LAZY_IMAGES`, `PRESERVE_FILE_DOWNLOAD_CACHE`, `PRESERVE_WEBPACK_CACHE`, ], @@ -129,6 +130,34 @@ const activeFlags: Array = [ } }, }, + { + 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 gatsby-plugin-sharp@2.10.0 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`, From 4db632d32da6d7d10fac3b2e3351ae11eda0f224 Mon Sep 17 00:00:00 2001 From: Vladimir Razuvaev Date: Tue, 29 Dec 2020 23:57:03 +0700 Subject: [PATCH 3/3] Keep disabled in CI --- packages/gatsby-plugin-sharp/src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index 1120c1b301eed..3536017a7b447 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/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`) @@ -154,6 +155,7 @@ function createJob(job, { reporter }) { function lazyJobsEnabled() { return ( process.env.gatsby_executing_command === `develop` && + !isCI() && !( process.env.ENABLE_GATSBY_EXTERNAL_JOBS === `true` || process.env.ENABLE_GATSBY_EXTERNAL_JOBS === `1`