Add `dangerously-unoptimized` loader for next/image #26847

darshkpatel · 2021-07-02T06:39:33Z

Related to: #21079
RFC Link: #26850

Added loader dangerously-unoptimized which basically returns the src URL, this would also allow next export to run without errors and Images without a custom loader specified can fallback to the static loader.

ToDo:

Add Integration tests
Update Documentation

styfle

Thanks for the PR!

Let's get feedback in RFC #26850 before proceeding 👍

docs/basic-features/image-optimization.md

packages/next/client/image.tsx

test/integration/image-optimizer/test/index.test.js

Co-authored-by: Steven <steven@ceriously.com>

styfle

Thanks!

ijjk · 2021-07-07T19:52:49Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
buildDuration	16.7s	16.7s	-37ms
buildDurationCached	3.9s	3.8s	-113ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +465 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.775	2.747	-0.03
/ avg req/sec	901.05	909.95	+8.9
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.737	1.735	0
/error-in-render avg req/sec	1439.09	1440.85	+1.76

Client Bundles (main, webpack, commons)

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
359.HASH.js gzip	3.09 kB	3.09 kB	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	20.6 kB	20.6 kB	✓
webpack-HASH.js gzip	1.49 kB	1.49 kB	✓
Overall change	67.2 kB	67.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.18 kB	3.18 kB	✓
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	329 B	329 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	5.6 kB	5.62 kB	⚠️ +21 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	14 kB	14 kB	⚠️ +21 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
_buildManifest.js gzip	418 B	419 B	⚠️ +1 B
Overall change	418 B	419 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
index.html gzip	531 B	531 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	524 B	524 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -13,7 +13,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-4e38b05900fed34fcf34.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-0a8987f5a01c8fb53ae0.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-f70c91ef36603165d772.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-461e3656f357dad048d3.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -131,7 +131,8 @@
         ["imgix", imgixLoader],
         ["cloudinary", cloudinaryLoader],
         ["akamai", akamaiLoader],
-        ["default", defaultLoader]
+        ["default", defaultLoader],
+        ["dangerously-unoptimized", unoptimizedLoader]
       ]);
       var VALID_LAYOUT_VALUES = [
         "fill",
@@ -752,11 +753,16 @@
           .concat(normalizeSrc(src));
       }
 
-      function defaultLoader(_ref9) {
-        var root = _ref9.root,
-          src = _ref9.src,
-          width = _ref9.width,
-          quality = _ref9.quality;
+      function unoptimizedLoader(_ref9) {
+        var src = _ref9.src;
+        return src;
+      }
+
+      function defaultLoader(_ref10) {
+        var root = _ref10.root,
+          src = _ref10.src,
+          width = _ref10.width,
+          quality = _ref10.quality;
 
         if (false) {
           var parsedSrc, missingValues;
@@ -1532,7 +1538,13 @@ Also adds support for deduplicated `key` properties
       "use strict";
       exports.__esModule = true;
       exports.imageConfigDefault = exports.VALID_LOADERS = void 0;
-      const VALID_LOADERS = ["default", "imgix", "cloudinary", "akamai"];
+      const VALID_LOADERS = [
+        "default",
+        "imgix",
+        "cloudinary",
+        "akamai",
+        "dangerously-unoptimized"
+      ];
       exports.VALID_LOADERS = VALID_LOADERS;
       const imageConfigDefault = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
buildDuration	13.1s	13.3s	⚠️ +230ms
buildDurationCached	5.3s	5.3s	-37ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +465 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.804	2.788	-0.02
/ avg req/sec	891.59	896.75	+5.16
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.667	1.703	⚠️ +0.04
/error-in-render avg req/sec	1499.31	1468.23	⚠️ -31.08

Client Bundles (main, webpack, commons)

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
14.HASH.js gzip	3.11 kB	3.11 kB	✓
677f882d2ed8..HASH.js gzip	13.9 kB	13.9 kB	✓
framework.HASH.js gzip	41.8 kB	41.8 kB	✓
main-HASH.js gzip	7.81 kB	7.81 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	67.8 kB	67.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
_app-HASH.js gzip	791 B	791 B	✓
_error-HASH.js gzip	3.83 kB	3.83 kB	✓
amp-HASH.js gzip	531 B	531 B	✓
css-HASH.js gzip	333 B	333 B	✓
hooks-HASH.js gzip	910 B	910 B	✓
index-HASH.js gzip	230 B	230 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	297 B	297 B	✓
withRouter-HASH.js gzip	293 B	293 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	8.98 kB	8.98 kB	✓

Client Build Manifests

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
_buildManifest.js gzip	418 B	418 B	✓
Overall change	418 B	418 B	✓

Rendered Page Sizes

	vercel/next.js canary	darshkpatel/next.js static-loader	Change
index.html gzip	575 B	575 B	✓
link.html gzip	586 B	586 B	✓
withRouter.html gzip	568 B	568 B	✓
Overall change	1.73 kB	1.73 kB	✓

Commit: 37c74bf

… applicable (#26998) Since we are no longer accepting new built-in loaders, users may wish to use a different cloud provider. So this PR renames `dangerously-unoptimized` to `custom` to handle this case as well as the intention of `next export`. If the user doesn't add a `loader` prop, we throw an error. If the user adds a `loader` prop but it doesn't return the width, we print a warning. - Follow up to #26847 - Fixes #21079 - Fixes #19612 - Related to #26850

* add support for static loader * update existing test * add test * add prettier-ignore * update docs * apply suggestions from review * remove un-needed normalize * Apply suggestions from code review Co-authored-by: Steven <steven@ceriously.com> * update test Co-authored-by: JJ Kasper <jj@jjsweb.site> Co-authored-by: Steven <steven@ceriously.com>

… applicable (vercel#26998) Since we are no longer accepting new built-in loaders, users may wish to use a different cloud provider. So this PR renames `dangerously-unoptimized` to `custom` to handle this case as well as the intention of `next export`. If the user doesn't add a `loader` prop, we throw an error. If the user adds a `loader` prop but it doesn't return the width, we print a warning. - Follow up to vercel#26847 - Fixes vercel#21079 - Fixes vercel#19612 - Related to vercel#26850

darshkpatel added 2 commits July 2, 2021 12:02

add support for static loader

017b1e8

update existing test

9643f16

ijjk added the type: next label Jul 2, 2021

This comment has been minimized.

Sign in to view

darshkpatel added 2 commits July 4, 2021 16:07

add test

8b45038

add prettier-ignore

95ffe37

This comment has been minimized.

Sign in to view

Merge branch 'canary' into static-loader

7781502

darshkpatel marked this pull request as ready for review July 4, 2021 10:55

darshkpatel requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners July 4, 2021 10:55

This comment has been minimized.

Sign in to view

update docs

5918e07

darshkpatel requested review from leerob and lfades as code owners July 4, 2021 11:09

ijjk added the type: documentation label Jul 4, 2021

This comment has been minimized.

Sign in to view

styfle reviewed Jul 5, 2021

View reviewed changes

ijjk reviewed Jul 7, 2021

View reviewed changes

docs/basic-features/image-optimization.md Outdated Show resolved Hide resolved

ijjk reviewed Jul 7, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

ijjk reviewed Jul 7, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

ijjk requested a review from styfle July 7, 2021 18:58

ijjk added 2 commits July 7, 2021 14:21

apply suggestions from review

b64b9a2

Merge remote-tracking branch 'upstream/canary' into static-loader

d8e6090

styfle reviewed Jul 7, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

remove un-needed normalize

7128775

styfle reviewed Jul 7, 2021

View reviewed changes

test/integration/image-optimizer/test/index.test.js Outdated Show resolved Hide resolved

Apply suggestions from code review

99c7635

Co-authored-by: Steven <steven@ceriously.com>

styfle previously approved these changes Jul 7, 2021

View reviewed changes

styfle changed the title ~~Static loader support for next/image~~ Add dangerously-unoptimized loader for next/image Jul 7, 2021

ijjk previously approved these changes Jul 7, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

update test

37c74bf

ijjk dismissed stale reviews from styfle and themself via 37c74bf July 7, 2021 19:41

ijjk approved these changes Jul 7, 2021

View reviewed changes

leerob mentioned this pull request Jul 7, 2021

Custom loaders are not recognized by next export #21079

Closed

ijjk merged commit 226e81c into vercel:canary Jul 7, 2021

styfle mentioned this pull request Jul 7, 2021

Rename next/image dangerously-unoptimized to custom and warn when applicable #26998

Merged

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `dangerously-unoptimized` loader for next/image #26847

Add `dangerously-unoptimized` loader for next/image #26847

darshkpatel commented Jul 2, 2021 •

edited by styfle

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

styfle left a comment

styfle left a comment

This comment has been minimized.

ijjk commented Jul 7, 2021

Diffs

Add dangerously-unoptimized loader for next/image #26847

Add dangerously-unoptimized loader for next/image #26847

Conversation

darshkpatel commented Jul 2, 2021 • edited by styfle Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

styfle left a comment

Choose a reason for hiding this comment

styfle left a comment

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Jul 7, 2021

Stats from current PR

Diffs

Add `dangerously-unoptimized` loader for next/image #26847

Add `dangerously-unoptimized` loader for next/image #26847

darshkpatel commented Jul 2, 2021 •

edited by styfle

Loading