Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

use official mini-css-extract-plugin and experimentalUseImportModule #24573

Merged
merged 11 commits into from
May 12, 2021
Merged

use official mini-css-extract-plugin and experimentalUseImportModule #24573

merged 11 commits into from
May 12, 2021

Conversation

sokra
Copy link
Member

@sokra sokra commented Apr 28, 2021 •
edited

fixes a caching bug with assets emitted by CSS files

Bug

  • Related issues linked using fixes #number
  • Integration tests added

Feature

  • Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
  • Related issues linked using fixes #number
  • Integration tests added
  • Documentation added
  • Telemetry added. In case of a feature if it's used or not.

Documentation / Examples

  • Make sure the linting passes

@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@sokra
Handle weird postcss syntax errors
3c0fa91 
which include ansi formating and a different line/column format

fix test case which reports a more specific error now
and no longer the wrapped one

update snapshot of intended filename format in errors
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
sokra
sokra commented May 5, 2021
View reviewed changes
packages/next/package.json Outdated Show resolved Hide resolved
@ijjk

This comment has been minimized.

Sign in to view
@sokra sokra mentioned this pull request May 12, 2021
Merged
2 tasks
@ijjk

This comment has been minimized.

Sign in to view
@sokra sokra marked this pull request as ready for review May 12, 2021 15:31
@ijjk
Copy link
Member

ijjk commented May 12, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js css/import-module Change
buildDuration 12.5s 12.9s ⚠️ +389ms
buildDurationCached 4.1s 3.7s -470ms
nodeModulesSize 46.5 MB 46.6 MB ⚠️ +169 kB
Page Load Tests Overall increase ✓
vercel/next.js canary vercel/next.js css/import-module Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.198 2.216 ⚠️ +0.02
/ avg req/sec 1137.4 1127.99 ⚠️ -9.41
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.303 1.27 -0.03
/error-in-render avg req/sec 1918.43 1969.03 +50.6
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js css/import-module Change
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 19.4 kB 19.4 kB ✓
webpack-HASH.js gzip 994 B 994 B ✓
Overall change 59.7 kB 59.7 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js css/import-module 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 css/import-module Change
_app-HASH.js gzip 1.02 kB 1.02 kB ✓
_error-HASH.js gzip 3.06 kB 3.06 kB ✓
amp-HASH.js gzip 526 B 526 B ✓
css-HASH.js gzip 334 B 334 B ✓
hooks-HASH.js gzip 890 B 890 B ✓
index-HASH.js gzip 262 B 262 B ✓
link-HASH.js gzip 1.65 kB 1.65 kB ✓
routerDirect..HASH.js gzip 331 B 331 B ✓
withRouter-HASH.js gzip 329 B 329 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 8.54 kB 8.54 kB ✓
Client Build Manifests Overall decrease ✓
vercel/next.js canary vercel/next.js css/import-module Change
_buildManifest.js gzip 395 B 394 B -1 B
Overall change 395 B 394 B -1 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js css/import-module Change
index.html gzip 562 B 563 B ⚠️ +1 B
link.html gzip 570 B 570 B ✓
withRouter.html gzip 558 B 557 B -1 B
Overall change 1.69 kB 1.69 kB ✓

Diffs

Diff for _buildManifest.js 
@@ -6,8 +6,8 @@ self.__BUILD_MANIFEST = {
   ],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-a0345799be7f0667d737.js"],
   "/css": [
-    "static\u002Fcss\u002F99a142a5cfae69599804.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-80c359352806cb30a49e.js"
+    "static\u002Fcss\u002F186b64ba8c630abb1030.css",
+    "static\u002Fchunks\u002Fpages\u002Fcss-3d472402b5984bac6855.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-f8aa55ff3468eec0f00f.js"
Diff for css-HASH.js 
@@ -15,7 +15,7 @@
         react__WEBPACK_IMPORTED_MODULE_0__
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        2499
+        9662
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -54,7 +54,7 @@
       /***/
     },
 
-    /***/ 2499: /***/ function(module) {
+    /***/ 9662: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__2Fhmt" };
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-51bc462d92f786232839.js"
+      href="/_next/static/chunks/webpack-8c69646b7ba45dc5225b.js"
       as="script"
     />
     <link
@@ -48,7 +48,7 @@
       src="/_next/static/chunks/polyfills-78f05ed2388e495e7b7b.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-51bc462d92f786232839.js"
+      src="/_next/static/chunks/webpack-8c69646b7ba45dc5225b.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-51bc462d92f786232839.js"
+      href="/_next/static/chunks/webpack-8c69646b7ba45dc5225b.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-78f05ed2388e495e7b7b.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-51bc462d92f786232839.js"
+      src="/_next/static/chunks/webpack-8c69646b7ba45dc5225b.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-51bc462d92f786232839.js"
+      href="/_next/static/chunks/webpack-8c69646b7ba45dc5225b.js"
       as="script"
     />
     <link
@@ -48,7 +48,7 @@
       src="/_next/static/chunks/polyfills-78f05ed2388e495e7b7b.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-51bc462d92f786232839.js"
+      src="/_next/static/chunks/webpack-8c69646b7ba45dc5225b.js"
       async=""
     ></script>
     <script
Serverless Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js css/import-module Change
buildDuration 16s 15.7s -285ms
buildDurationCached 5.8s 5.6s -239ms
nodeModulesSize 46.5 MB 46.6 MB ⚠️ +169 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js css/import-module Change
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 19.4 kB 19.4 kB ✓
webpack-HASH.js gzip 994 B 994 B ✓
Overall change 59.7 kB 59.7 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js css/import-module 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 css/import-module Change
_app-HASH.js gzip 1.02 kB 1.02 kB ✓
_error-HASH.js gzip 3.06 kB 3.06 kB ✓
amp-HASH.js gzip 526 B 526 B ✓
css-HASH.js gzip 334 B 334 B ✓
hooks-HASH.js gzip 890 B 890 B ✓
index-HASH.js gzip 262 B 262 B ✓
link-HASH.js gzip 1.65 kB 1.65 kB ✓
routerDirect..HASH.js gzip 331 B 331 B ✓
withRouter-HASH.js gzip 329 B 329 B ✓
99a142a5cfae..804.css gzip 125 B N/A N/A
186b64ba8c63..030.css gzip N/A 125 B N/A
Overall change 8.54 kB 8.54 kB ✓
Client Build Manifests Overall decrease ✓
vercel/next.js canary vercel/next.js css/import-module Change
_buildManifest.js gzip 395 B 394 B -1 B
Overall change 395 B 394 B -1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary vercel/next.js css/import-module Change
_error.js 1.34 MB 1.34 MB ⚠️ +2 B
404.html 2.42 kB 2.42 kB ✓
500.html 2.41 kB 2.41 kB ✓
amp.amp.html 10.8 kB 10.8 kB ✓
amp.html 1.61 kB 1.61 kB ✓
css.html 1.79 kB 1.79 kB ✓
hooks.html 1.67 kB 1.67 kB ✓
index.js 1.34 MB 1.34 MB ✓
link.js 1.4 MB 1.4 MB ✓
routerDirect.js 1.39 MB 1.39 MB ✓
withRouter.js 1.39 MB 1.39 MB ✓
Overall change 6.9 MB 6.9 MB ⚠️ +2 B
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js css/import-module Change
buildDuration 10.8s 11.1s ⚠️ +307ms
buildDurationCached 4.4s 4.5s ⚠️ +65ms
nodeModulesSize 46.5 MB 46.6 MB ⚠️ +169 kB
Page Load Tests Overall increase ✓
vercel/next.js canary vercel/next.js css/import-module Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.309 2.289 -0.02
/ avg req/sec 1082.53 1092.23 +9.7
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.292 1.291 0
/error-in-render avg req/sec 1934.27 1936.95 +2.68
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js css/import-module Change
677f882d2ed8..HASH.js gzip 13.3 kB 13.3 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.26 kB 7.26 kB ✓
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.3 kB 60.3 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js css/import-module 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 css/import-module Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.74 kB 3.74 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
css-HASH.js gzip 339 B 339 B ✓
hooks-HASH.js gzip 887 B 887 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.64 kB 1.64 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
21c68fa65a48..217.css gzip 125 B 125 B ✓
Overall change 9.38 kB 9.38 kB ✓
Client Build Manifests
vercel/next.js canary vercel/next.js css/import-module Change
_buildManifest.js gzip 420 B 420 B ✓
Overall change 420 B 420 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js css/import-module Change
index.html gzip 614 B 614 B ✓
link.html gzip 620 B 620 B ✓
withRouter.html gzip 607 B 607 B ✓
Overall change 1.84 kB 1.84 kB ✓

Diffs

Diff for _buildManifest.js 
@@ -6,8 +6,8 @@ self.__BUILD_MANIFEST = {
   ],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-27f75ad11120c5cdedd1.js"],
   "/css": [
-    "static\u002Fcss\u002F21c68fa65a48a5bcb217.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-a0db19e350dbbf07ee03.js"
+    "static\u002Fcss\u002Fe025d27648136bbd252f.css",
+    "static\u002Fchunks\u002Fpages\u002Fcss-ebb5bfc372f92af6f275.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-f1cc32851f5e866a7e78.js"
Commit: 5ec6d5b

@kodiakhq kodiakhq bot merged commit 5f3351d into canary May 12, 2021
@kodiakhq kodiakhq bot deleted the css/import-module branch May 12, 2021 16:04
kodiakhq bot pushed a commit that referenced this pull request May 12, 2021
@sokra
enable contenthashing in webpack 5 (#25055)
288984b 
This improves long term caching by avoiding hash changes

workaround fix #25013 
The real problem is fixed by #24573

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
@mcsdevv mcsdevv mentioned this pull request May 20, 2021
Closed
@TxHawks TxHawks mentioned this pull request May 28, 2021
Closed
flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 1, 2021
@sokra
use official mini-css-extract-plugin and experimentalUseImportModule (v…
d9fe4a1 
…ercel#24573)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes
flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 1, 2021
@sokra
enable contenthashing in webpack 5 (vercel#25055)
d116621 
This improves long term caching by avoiding hash changes

workaround fix vercel#25013 
The real problem is fixed by vercel#24573

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@timneutkens timneutkens timneutkens approved these changes

@divmain divmain Awaiting requested review from divmain

@ijjk ijjk Awaiting requested review from ijjk ijjk is a code owner

@lfades lfades Awaiting requested review from lfades

@shuding shuding Awaiting requested review from shuding shuding is a code owner

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@sokra @ijjk @timneutkens