Enhance next dev performance with placeholder=blur

[styfle]

This PR changes the implementation of placeholder=blur when using next dev so that it lazy loads on-demand.

This will improve the developer experience for web apps with many blurred images.

[ijjk]

Failing test suites

Commit: 0059e06

test/integration/config-devtool-dev/test/index.test.js

• devtool set in development mode in next config > should warn and revert when a devtool is set in development mode

Expand output

● devtool set in development mode in next config › should warn and revert when a devtool is set in development mode

thrown: "Exceeded timeout of 30000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  17 |
  18 | describe('devtool set in development mode in next config', () => {
> 19 |   it('should warn and revert when a devtool is set in development mode', async () => {
     |   ^
  20 |     let stderr = ''
  21 |
  22 |     const appPort = await findPort()

  at integration/config-devtool-dev/test/index.test.js:19:3
  at Object.<anonymous> (integration/config-devtool-dev/test/index.test.js:18:1)

test/integration/image-component/default/test/index.test.js

• Image Component Tests > dev mode > should show error when static import and placeholder=blur and blurDataUrl is missing

Expand output

● Image Component Tests › dev mode › should show error when static import and placeholder=blur and blurDataUrl is missing

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  540 |       )
  541 |
> 542 |       expect(await hasRedbox(browser)).toBe(true)
      |                                        ^
  543 |       expect(await getRedboxHeader(browser)).toMatch(
  544 |         /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/
  545 |       )

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:542:40)

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	Change
buildDuration	16s	15.8s	-207ms
buildDurationCached	3.7s	3.6s	-115ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +1.83 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.573	2.58	⚠️ +0.01
/ avg req/sec	971.65	968.89	⚠️ -2.76
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.451	1.505	⚠️ +0.05
/error-in-render avg req/sec	1723.21	1661.66	⚠️ -61.55

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	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	vercel/next.js enhance-blur-next-dev-lazy	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	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.69 kB	5.69 kB	✓
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.1 kB	14.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	Change
_buildManifest.js gzip	419 B	419 B	✓
Overall change	419 B	419 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	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	✓

---

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	Change
buildDuration	12.6s	12.7s	⚠️ +107ms
buildDurationCached	5s	4.9s	-46ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +1.83 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.579	2.567	-0.01
/ avg req/sec	969.22	973.77	+4.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.397	1.48	⚠️ +0.08
/error-in-render avg req/sec	1789.01	1689.11	⚠️ -99.9

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	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	vercel/next.js enhance-blur-next-dev-lazy	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	vercel/next.js enhance-blur-next-dev-lazy	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	vercel/next.js enhance-blur-next-dev-lazy	Change
_buildManifest.js gzip	418 B	418 B	✓
Overall change	418 B	418 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js enhance-blur-next-dev-lazy	Change
index.html gzip	574 B	574 B	✓
link.html gzip	586 B	586 B	✓
withRouter.html gzip	569 B	569 B	✓
Overall change	1.73 kB	1.73 kB	✓

Commit: f79cf91

[timneutkens]

Looks good, can you follow up with a PR to add a test for assetPrefix when using static image