Add serialization for mini-css-plugin webpack 5 caching #16379

timneutkens · 2020-08-20T08:55:25Z

Solves the serialization error when caching is enabled

…with webpack 5

…ible yet

packages/next/build/webpack-config.ts

ijjk · 2020-08-20T09:29:40Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
buildDuration	11.9s	12s	⚠️ +183ms
nodeModulesSize	57.7 MB	57.7 MB	⚠️ +75.3 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.134	2.173	⚠️ +0.04
/ avg req/sec	1171.53	1150.71	⚠️ -20.82
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.171	1.154	-0.02
/error-in-render avg req/sec	2135.33	2165.45	+30.12

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
677f882d2ed8..4e55.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-072263f..ffd7.js gzip	7.2 kB	7.2 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
677f882d2ed8..dule.js gzip	6.11 kB	6.11 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-a951a64..dule.js gzip	6.21 kB	6.21 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52 kB	52 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-1464c..a26f.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-000f151..65d4.js gzip	1.29 kB	1.29 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.69 kB	7.69 kB	✓

Client Pages Modern

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-e550f..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-4cfda7a..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.35 kB	5.35 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
index.html gzip	948 B	948 B	✓
link.html gzip	954 B	954 B	✓
withRouter.html gzip	940 B	940 B	✓
Overall change	2.84 kB	2.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
buildDuration	12.9s	13.3s	⚠️ +429ms
nodeModulesSize	57.7 MB	57.7 MB	⚠️ +75.3 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
677f882d2ed8..4e55.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-072263f..ffd7.js gzip	7.2 kB	7.2 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
677f882d2ed8..dule.js gzip	6.11 kB	6.11 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-a951a64..dule.js gzip	6.21 kB	6.21 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52 kB	52 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-1464c..a26f.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-000f151..65d4.js gzip	1.29 kB	1.29 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.69 kB	7.69 kB	✓

Client Pages Modern

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-e550f..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-4cfda7a..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.35 kB	5.35 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.82 kB	3.82 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.07 MB	1.07 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.27 MB	5.27 MB	✓

Commit: 88e0272

ijjk · 2020-08-20T09:31:50Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
buildDuration	11.5s	11.9s	⚠️ +367ms
nodeModulesSize	57.7 MB	57.4 MB	-235 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.249	2.246	0
/ avg req/sec	1111.82	1112.92	+1.1
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.355	1.452	⚠️ +0.1
/error-in-render avg req/sec	1844.87	1722.21	⚠️ -122.66

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
677f882d2ed8..4e55.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-072263f..ffd7.js gzip	7.2 kB	7.2 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
677f882d2ed8..dule.js gzip	6.11 kB	6.11 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-a951a64..dule.js gzip	6.21 kB	6.21 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52 kB	52 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-1464c..a26f.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-000f151..65d4.js gzip	1.29 kB	1.29 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.69 kB	7.69 kB	✓

Client Pages Modern

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-e550f..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-4cfda7a..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.35 kB	5.35 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
index.html gzip	948 B	948 B	✓
link.html gzip	954 B	954 B	✓
withRouter.html gzip	940 B	940 B	✓
Overall change	2.84 kB	2.84 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
buildDuration	13.3s	12.9s	-368ms
nodeModulesSize	57.7 MB	57.4 MB	-235 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
677f882d2ed8..4e55.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-072263f..ffd7.js gzip	7.2 kB	7.2 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
677f882d2ed8..dule.js gzip	6.11 kB	6.11 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-a951a64..dule.js gzip	6.21 kB	6.21 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52 kB	52 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-1464c..a26f.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-000f151..65d4.js gzip	1.29 kB	1.29 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.69 kB	7.69 kB	✓

Client Pages Modern

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-e550f..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-4cfda7a..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.35 kB	5.35 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	timneutkens/next.js add/mini-css-plugin-webpack5-compat	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.82 kB	3.82 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.07 MB	1.07 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.27 MB	5.27 MB	✓

Commit: b989374

… fixes it

timneutkens added 4 commits August 19, 2020 22:17

Bring over mini-css-extract-plugin so that we can make it compatible …

20070db

…with webpack 5

Clean up mini-css-plugin

b562815

Use RawSource instead of custom source function

44b7777

Disable realContentHash temporarily as wepback plugins are not compat…

eca64a4

…ible yet

timneutkens requested review from ijjk, lfades and Timer as code owners August 20, 2020 08:55

ijjk added the type: next label Aug 20, 2020

sokra reviewed Aug 20, 2020

View reviewed changes

packages/next/build/webpack-config.ts Outdated Show resolved Hide resolved

timneutkens added 2 commits August 20, 2020 11:20

Add ignores where needed

88e0272

Remove unused dependency

b989374

Remove realContentHash disabling as new webpack 5 version is out that…

b978c06

… fixes it

timneutkens merged commit dab55b4 into vercel:canary Aug 20, 2020

timneutkens deleted the add/mini-css-plugin-webpack5-compat branch August 20, 2020 10:38

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add serialization for mini-css-plugin webpack 5 caching #16379

Add serialization for mini-css-plugin webpack 5 caching #16379

timneutkens commented Aug 20, 2020

ijjk commented Aug 20, 2020

ijjk commented Aug 20, 2020

Add serialization for mini-css-plugin webpack 5 caching #16379

Add serialization for mini-css-plugin webpack 5 caching #16379

Conversation

timneutkens commented Aug 20, 2020

ijjk commented Aug 20, 2020

Stats from current PR

ijjk commented Aug 20, 2020

Stats from current PR