Skip to content

Commit

Permalink
feat(gatsby): enable lazy images by default (#28743)
Browse files Browse the repository at this point in the history
* feat(gatsby): enable lazy images by default

* revert changes to flags.ts

* Keep disabled in CI
  • Loading branch information
vladar authored Dec 29, 2020
1 parent 968914f commit 3b40d80
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 48 deletions.
36 changes: 3 additions & 33 deletions packages/gatsby-plugin-sharp/src/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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
}
Expand Down
31 changes: 16 additions & 15 deletions packages/gatsby-plugin-sharp/src/index.js
Original file line number Diff line number Diff line change
@@ -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`)
Expand Down Expand Up @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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(),
},
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -773,3 +773,4 @@ exports.getImageSize = getImageSize
exports.getImageSizeAsync = getImageSizeAsync
exports.stats = stats
exports._unstable_createJob = createJob
exports._lazyJobsEnabled = lazyJobsEnabled

0 comments on commit 3b40d80

Please sign in to comment.