Skip to content

/ next.js

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.

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

feat: webpack inlining with configuration for v4 / v5 #20598

Merged
merged 80 commits into from Jan 14, 2021
Merged

feat: webpack inlining with configuration for v4 / v5 #20598

merged 80 commits into from Jan 14, 2021

Conversation

@guybedford
Copy link
Contributor

@guybedford guybedford commented Dec 30, 2020 •
edited by Timer

Yet another attempt at Webpack inlining, this time with the benefits of Webpack 4 / Webpack 5 selection encapsulation.

Webpack 5 is enabled via a future: { webpack5: true } configuration in next.config.js or via a NEXT_WEBPACK5=1 set for execution of Next.js.

In the code, all Webpack bindings must be assumed to be deferred due to the lazy initialization and must be taken from the wrapper module now. The added benefit of this is even the ability to switch webpack versions during app execution (whether that will be useful or not!).

The major possible concern with this PR remains the same as the previous attempts - users relying on import webpack from 'webpack' to reference the Next.js webpack version. See for example the last reversion issue in #7632. I did try this example, but got the following error on Canary - TypeError: input.module.originalSource is not a function. Perhaps we can have some discussion around those patterns @timneutkens @Timer to determine if there is anything more we can do here.

Remaining TODO:

  • Update webpack-asset-relocator-loader / ncc to vercel/ncc#634 for customEmit and verify compiled is generating correctly
  • Webpack 5 test - this case is currently failing for Webpack 5 tests only - #12674
  • Fixup stats run
  • Fixup Azure run
@ijjk ijjk added the type: next label Dec 30, 2020
@ijjk

This comment has been hidden.

Sign in to view
@Timer
Timer reviewed Dec 30, 2020
View changes
packages/next/types/misc.d.ts Outdated Show resolved Hide resolved
packages/next/package.json Outdated Show resolved Hide resolved
packages/next/taskfile.js Show resolved Hide resolved
packages/next/package.json Outdated Show resolved Hide resolved
packages/next/package.json Show resolved Hide resolved
packages/next/package.json Outdated Show resolved Hide resolved
packages/next/compiled/webpack/minify.js Outdated Show resolved Hide resolved
packages/next/compiled/webpack/worker.js Outdated Show resolved Hide resolved
@guybedford guybedford force-pushed the guybedford:webpack-inlining branch from 11e33b9 to b2cbd4f Dec 30, 2020
@ijjk

This comment has been hidden.

Sign in to view
@guybedford guybedford force-pushed the guybedford:webpack-inlining branch from b2cbd4f to 37b4aa0 Dec 31, 2020
@ijjk

This comment has been hidden.

Sign in to view
@guybedford guybedford force-pushed the guybedford:webpack-inlining branch from 37b4aa0 to 8907a01 Dec 31, 2020
@guybedford guybedford force-pushed the guybedford:webpack-inlining branch from f9913d2 to 87438a0 Dec 31, 2020
@ijjk

This comment has been hidden.

Sign in to view
@guybedford guybedford force-pushed the guybedford:webpack-inlining branch from 17ab69f to 426df3d Dec 31, 2020
@ijjk

This comment has been hidden.

Sign in to view
@guybedford guybedford force-pushed the guybedford:webpack-inlining branch from 426df3d to dbf9d33 Dec 31, 2020
@ijjk

This comment has been hidden.

Sign in to view
@guybedford guybedford force-pushed the guybedford:webpack-inlining branch from dbf9d33 to e8b7814 Dec 31, 2020
@ijjk

This comment has been hidden.

Sign in to view
@Timer
Timer reviewed Jan 13, 2021
View changes
test/integration/build-output/test/index.test.js Show resolved Hide resolved
@Timer
Timer reviewed Jan 13, 2021
View changes
test/integration/build-output/test/index.test.js Show resolved Hide resolved
@guybedford
remove stats config changes
Loading status checks…
51b4cc5
@guybedford guybedford force-pushed the guybedford:webpack-inlining branch from c43fdae to 51b4cc5 Jan 13, 2021
@Timer
Timer reviewed Jan 13, 2021
View changes
@ijjk

This comment has been hidden.

Sign in to view
guybedford added 2 commits Jan 13, 2021
@guybedford
update compiled
af499a9
@guybedford
try remove build output changes
Loading status checks…
1cba4e4
@ijjk

This comment has been hidden.

Sign in to view
@ijjk
Copy link
Member

@ijjk ijjk commented Jan 13, 2021

Failing test suites

Commit: 1cba4e4

test/integration/build-output/test/index.test.js

  • Build Output > Crypto Application > should not include crypto
Expand output

● Build Output › Crypto Application › should not include crypto

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 3
Received:    3.04

  165 |       const indexFirstLoad = parsePageFirstLoad('/')
  166 | 
> 167 |       expect(parseFloat(indexSize)).toBeLessThanOrEqual(3)
      |                                     ^
  168 |       expect(parseFloat(indexSize)).toBeGreaterThanOrEqual(2)
  169 |       expect(indexSize.endsWith('kB')).toBe(true)
  170 | 

  at Object.<anonymous> (integration/build-output/test/index.test.js:167:37)
@guybedford
lol
Loading status checks…
36614aa
@ijjk
Copy link
Member

@ijjk ijjk commented Jan 13, 2021

Failing test suites

Commit: 36614aa

test/integration/build-output/test/index.test.js

  • Build Output > Crypto Application > should not include crypto
Expand output

● Build Output › Crypto Application › should not include crypto

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 3
Received:    3.04

  165 |       const indexFirstLoad = parsePageFirstLoad('/')
  166 | 
> 167 |       expect(parseFloat(indexSize)).toBeLessThanOrEqual(3)
      |                                     ^
  168 |       expect(parseFloat(indexSize)).toBeGreaterThanOrEqual(2)
  169 |       expect(indexSize.endsWith('kB')).toBe(true)
  170 | 

  at Object.<anonymous> (integration/build-output/test/index.test.js:167:37)
@ijjk
Copy link
Member

@ijjk ijjk commented Jan 13, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary guybedford/next.js webpack-inlining Change
buildDuration 10.9s 11.5s ⚠️ +519ms
nodeModulesSize 80.8 MB 77.5 MB -3.34 MB
Page Load Tests Overall increase ✓
vercel/next.js canary guybedford/next.js webpack-inlining Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.273 2.296 ⚠️ +0.02
/ avg req/sec 1100.03 1089.07 ⚠️ -10.96
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.652 1.558 -0.09
/error-in-render avg req/sec 1513.51 1604.72 +91.21
Client Bundles (main, webpack, commons)
vercel/next.js canary guybedford/next.js webpack-inlining Change
677f882d2ed8..b025.js gzip 13.1 kB 13.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-e66dcae..6635.js gzip 6.63 kB 6.63 kB ✓
webpack-50be..df5b.js gzip 751 B 751 B ✓
Overall change 59.4 kB 59.4 kB ✓
Legacy Client Bundles (polyfills) Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
polyfills-81..14d7.js gzip 31.2 kB 31.3 kB ⚠️ +105 B
Overall change 31.2 kB 31.3 kB ⚠️ +105 B
Client Pages
vercel/next.js canary guybedford/next.js webpack-inlining Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
hooks-c71ae4..70cd.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary guybedford/next.js webpack-inlining Change
_buildManifest.js gzip 321 B 321 B ✓
Overall change 321 B 321 B ✓
Rendered Page Sizes
vercel/next.js canary guybedford/next.js webpack-inlining Change
index.html gzip 615 B 614 B -1 B
link.html gzip 619 B 620 B ⚠️ +1 B
withRouter.html gzip 608 B 608 B ✓
Overall change 1.84 kB 1.84 kB ✓

Diffs

Diff for main-bbfb833..0f987beed.js 
@@ -1588,22 +1588,22 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             }
           };
           var e = {};
-          function __webpack_require__(n) {
+          function __nccwpck_require__(n) {
             if (e[n]) {
               return e[n].exports;
             }
             var i = (e[n] = { exports: {} });
             var a = true;
             try {
-              t[n].call(i.exports, i, i.exports, __webpack_require__);
+              t[n].call(i.exports, i, i.exports, __nccwpck_require__);
               a = false;
             } finally {
               if (a) delete e[n];
             }
             return i.exports;
           }
-          __webpack_require__.ab = __dirname + "/";
-          return __webpack_require__(599);
+          __nccwpck_require__.ab = __dirname + "/";
+          return __nccwpck_require__(599);
         })();
         /* WEBPACK VAR INJECTION */
       }.call(this, "/"));
Diff for polyfills-ae..7af5f55f8.js 
@@ -6637,7 +6637,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         })();
 
         /* WEBPACK VAR INJECTION */
-      }.call(this, __webpack_require__("yLpj")));
+      }.call(this, __webpack_require__("ntbh")));
 
       /***/
     },
@@ -6650,27 +6650,89 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       /***/
     },
 
-    /***/ yLpj: /***/ function(module, exports) {
-      var g;
+    /***/ ntbh: /***/ function(module, exports) {
+      /* WEBPACK VAR INJECTION */ (function(__dirname) {
+        module.exports = /******/ (() => {
+          // webpackBootstrap
+          /******/ var __webpack_modules__ = {
+            /***/ 149: /***/ module => {
+              var g;
 
-      // This works in non-strict mode
-      g = (function() {
-        return this;
-      })();
+              // This works in non-strict mode
+              g = (function() {
+                return this;
+              })();
+
+              try {
+                // This works if eval is allowed (see CSP)
+                g = g || new Function("return this")();
+              } catch (e) {
+                // This works if the window reference is available
+                if (typeof window === "object") g = window;
+              }
+
+              // g can still be undefined, but nothing to do about it...
+              // We return undefined, instead of nothing here, so it's
+              // easier to handle this case. if(!global) { ...}
+
+              module.exports = g;
 
-      try {
-        // This works if eval is allowed (see CSP)
-        g = g || new Function("return this")();
-      } catch (e) {
-        // This works if the window reference is available
-        if (typeof window === "object") g = window;
-      }
+              /***/
+            }
+
+            /******/
+          }; // The module cache
+          /************************************************************************/
+          /******/ /******/ var __webpack_module_cache__ = {}; // The require function
+          /******/
+
+          /******/ /******/ function __nccwpck_require__(moduleId) {
+            /******/ // Check if module is in cache
+            /******/ if (__webpack_module_cache__[moduleId]) {
+              /******/ return __webpack_module_cache__[moduleId].exports;
+              /******/
+            } // Create a new module (and put it into the cache)
+            /******/ /******/ var module = (__webpack_module_cache__[
+              moduleId
+            ] = {
+              /******/ // no module.id needed
+              /******/ // no module.loaded needed
+              /******/ exports: {}
+              /******/
+            }); // Execute the module function
+            /******/
+
+            /******/ /******/ var threw = true;
+            /******/ try {
+              /******/ __webpack_modules__[moduleId](
+                module,
+                module.exports,
+                __nccwpck_require__
+              );
+              /******/ threw = false;
+              /******/
+            } finally {
+              /******/ if (threw) delete __webpack_module_cache__[moduleId];
+              /******/
+            } // Return the exports of the module
+            /******/
+
+            /******/ /******/ return module.exports;
+            /******/
+          } /* webpack/runtime/compat */
+          /******/
 
-      // g can still be undefined, but nothing to do about it...
-      // We return undefined, instead of nothing here, so it's
-      // easier to handle this case. if(!global) { ...}
+          /************************************************************************/
+          /******/ /******/
 
-      module.exports = g;
+          /******/ __nccwpck_require__.ab =
+            __dirname +
+            "/"; /************************************************************************/ // module exports must be returned from runtime so entry inlining is disabled // startup // Load entry module and return exports
+          /******/ /******/ /******/ /******/ return __nccwpck_require__(149);
+          /******/
+        })();
+        /* WEBPACK VAR INJECTION */
+      }.call(this, "/"));
 
       /***/
     }
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -50,10 +50,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-f5504ae8048bff2c0f05.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -55,10 +55,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-f5504ae8048bff2c0f05.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -50,10 +50,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-f5504ae8048bff2c0f05.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary guybedford/next.js webpack-inlining Change
buildDuration 13.5s 13.4s -131ms
nodeModulesSize 80.8 MB 77.5 MB -3.34 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary guybedford/next.js webpack-inlining Change
677f882d2ed8..b025.js gzip 13.1 kB 13.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-e66dcae..6635.js gzip 6.63 kB N/A N/A
webpack-50be..df5b.js gzip 751 B 751 B ✓
main-9d28255..78cd.js gzip N/A 6.63 kB N/A
Overall change 59.4 kB 59.4 kB ✓
Legacy Client Bundles (polyfills) Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
polyfills-81..14d7.js gzip 31.2 kB N/A N/A
polyfills-0e..7843.js gzip N/A 31.3 kB N/A
Overall change 31.2 kB 31.3 kB ⚠️ +105 B
Client Pages
vercel/next.js canary guybedford/next.js webpack-inlining Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
hooks-c71ae4..70cd.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary guybedford/next.js webpack-inlining Change
_buildManifest.js gzip 321 B 321 B ✓
Overall change 321 B 321 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
_error.js 1 MB 1 MB ⚠️ +1.8 kB
404.html 2.67 kB 2.67 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1 MB 1 MB ⚠️ +1.8 kB
link.js 1.06 MB 1.06 MB ⚠️ +1.8 kB
routerDirect.js 1.05 MB 1.05 MB ⚠️ +1.8 kB
withRouter.js 1.05 MB 1.05 MB ⚠️ +1.8 kB
Overall change 5.18 MB 5.18 MB ⚠️ +9 kB
Commit: 36614aa
@guybedford
Revert "try remove build output changes"
Loading status checks…
2656b39 
This reverts commit 1cba4e4.
@ijjk
Copy link
Member

@ijjk ijjk commented Jan 13, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary guybedford/next.js webpack-inlining Change
buildDuration 11.5s 11.4s -98ms
nodeModulesSize 80.8 MB 77.5 MB -3.34 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.361 2.374 ⚠️ +0.01
/ avg req/sec 1058.99 1052.97 ⚠️ -6.02
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.688 1.682 -0.01
/error-in-render avg req/sec 1481.12 1485.95 +4.83
Client Bundles (main, webpack, commons)
vercel/next.js canary guybedford/next.js webpack-inlining Change
677f882d2ed8..b025.js gzip 13.1 kB 13.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-e66dcae..6635.js gzip 6.63 kB 6.63 kB ✓
webpack-50be..df5b.js gzip 751 B 751 B ✓
Overall change 59.4 kB 59.4 kB ✓
Legacy Client Bundles (polyfills) Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
polyfills-81..14d7.js gzip 31.2 kB 31.3 kB ⚠️ +105 B
Overall change 31.2 kB 31.3 kB ⚠️ +105 B
Client Pages
vercel/next.js canary guybedford/next.js webpack-inlining Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
hooks-c71ae4..70cd.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary guybedford/next.js webpack-inlining Change
_buildManifest.js gzip 321 B 321 B ✓
Overall change 321 B 321 B ✓
Rendered Page Sizes
vercel/next.js canary guybedford/next.js webpack-inlining Change
index.html gzip 615 B 614 B -1 B
link.html gzip 619 B 620 B ⚠️ +1 B
withRouter.html gzip 608 B 608 B ✓
Overall change 1.84 kB 1.84 kB ✓

Diffs

Diff for main-bbfb833..0f987beed.js 
@@ -1588,22 +1588,22 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             }
           };
           var e = {};
-          function __webpack_require__(n) {
+          function __nccwpck_require__(n) {
             if (e[n]) {
               return e[n].exports;
             }
             var i = (e[n] = { exports: {} });
             var a = true;
             try {
-              t[n].call(i.exports, i, i.exports, __webpack_require__);
+              t[n].call(i.exports, i, i.exports, __nccwpck_require__);
               a = false;
             } finally {
               if (a) delete e[n];
             }
             return i.exports;
           }
-          __webpack_require__.ab = __dirname + "/";
-          return __webpack_require__(599);
+          __nccwpck_require__.ab = __dirname + "/";
+          return __nccwpck_require__(599);
         })();
         /* WEBPACK VAR INJECTION */
       }.call(this, "/"));
Diff for polyfills-ae..7af5f55f8.js 
@@ -6637,7 +6637,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         })();
 
         /* WEBPACK VAR INJECTION */
-      }.call(this, __webpack_require__("yLpj")));
+      }.call(this, __webpack_require__("ntbh")));
 
       /***/
     },
@@ -6650,27 +6650,89 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       /***/
     },
 
-    /***/ yLpj: /***/ function(module, exports) {
-      var g;
+    /***/ ntbh: /***/ function(module, exports) {
+      /* WEBPACK VAR INJECTION */ (function(__dirname) {
+        module.exports = /******/ (() => {
+          // webpackBootstrap
+          /******/ var __webpack_modules__ = {
+            /***/ 149: /***/ module => {
+              var g;
 
-      // This works in non-strict mode
-      g = (function() {
-        return this;
-      })();
+              // This works in non-strict mode
+              g = (function() {
+                return this;
+              })();
+
+              try {
+                // This works if eval is allowed (see CSP)
+                g = g || new Function("return this")();
+              } catch (e) {
+                // This works if the window reference is available
+                if (typeof window === "object") g = window;
+              }
+
+              // g can still be undefined, but nothing to do about it...
+              // We return undefined, instead of nothing here, so it's
+              // easier to handle this case. if(!global) { ...}
+
+              module.exports = g;
 
-      try {
-        // This works if eval is allowed (see CSP)
-        g = g || new Function("return this")();
-      } catch (e) {
-        // This works if the window reference is available
-        if (typeof window === "object") g = window;
-      }
+              /***/
+            }
+
+            /******/
+          }; // The module cache
+          /************************************************************************/
+          /******/ /******/ var __webpack_module_cache__ = {}; // The require function
+          /******/
+
+          /******/ /******/ function __nccwpck_require__(moduleId) {
+            /******/ // Check if module is in cache
+            /******/ if (__webpack_module_cache__[moduleId]) {
+              /******/ return __webpack_module_cache__[moduleId].exports;
+              /******/
+            } // Create a new module (and put it into the cache)
+            /******/ /******/ var module = (__webpack_module_cache__[
+              moduleId
+            ] = {
+              /******/ // no module.id needed
+              /******/ // no module.loaded needed
+              /******/ exports: {}
+              /******/
+            }); // Execute the module function
+            /******/
+
+            /******/ /******/ var threw = true;
+            /******/ try {
+              /******/ __webpack_modules__[moduleId](
+                module,
+                module.exports,
+                __nccwpck_require__
+              );
+              /******/ threw = false;
+              /******/
+            } finally {
+              /******/ if (threw) delete __webpack_module_cache__[moduleId];
+              /******/
+            } // Return the exports of the module
+            /******/
+
+            /******/ /******/ return module.exports;
+            /******/
+          } /* webpack/runtime/compat */
+          /******/
 
-      // g can still be undefined, but nothing to do about it...
-      // We return undefined, instead of nothing here, so it's
-      // easier to handle this case. if(!global) { ...}
+          /************************************************************************/
+          /******/ /******/
 
-      module.exports = g;
+          /******/ __nccwpck_require__.ab =
+            __dirname +
+            "/"; /************************************************************************/ // module exports must be returned from runtime so entry inlining is disabled // startup // Load entry module and return exports
+          /******/ /******/ /******/ /******/ return __nccwpck_require__(149);
+          /******/
+        })();
+        /* WEBPACK VAR INJECTION */
+      }.call(this, "/"));
 
       /***/
     }
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -50,10 +50,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-f5504ae8048bff2c0f05.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -55,10 +55,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-f5504ae8048bff2c0f05.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -50,10 +50,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-f5504ae8048bff2c0f05.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary guybedford/next.js webpack-inlining Change
buildDuration 13.7s 13.8s ⚠️ +112ms
nodeModulesSize 80.8 MB 77.5 MB -3.34 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary guybedford/next.js webpack-inlining Change
677f882d2ed8..b025.js gzip 13.1 kB 13.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-e66dcae..6635.js gzip 6.63 kB N/A N/A
webpack-50be..df5b.js gzip 751 B 751 B ✓
main-9d28255..78cd.js gzip N/A 6.63 kB N/A
Overall change 59.4 kB 59.4 kB ✓
Legacy Client Bundles (polyfills) Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
polyfills-81..14d7.js gzip 31.2 kB N/A N/A
polyfills-0e..7843.js gzip N/A 31.3 kB N/A
Overall change 31.2 kB 31.3 kB ⚠️ +105 B
Client Pages
vercel/next.js canary guybedford/next.js webpack-inlining Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
hooks-c71ae4..70cd.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary guybedford/next.js webpack-inlining Change
_buildManifest.js gzip 321 B 321 B ✓
Overall change 321 B 321 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
_error.js 1 MB 1 MB ⚠️ +1.8 kB
404.html 2.67 kB 2.67 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1 MB 1 MB ⚠️ +1.8 kB
link.js 1.06 MB 1.06 MB ⚠️ +1.8 kB
routerDirect.js 1.05 MB 1.05 MB ⚠️ +1.8 kB
withRouter.js 1.05 MB 1.05 MB ⚠️ +1.8 kB
Overall change 5.18 MB 5.18 MB ⚠️ +9 kB
Commit: 2656b39
ijjk added 2 commits Jan 13, 2021
@ijjk
Update ncc target for webpack
5619651
@ijjk
Update compiled
Loading status checks…
4641bd3
@ijjk
Copy link
Member

@ijjk ijjk commented Jan 13, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary guybedford/next.js webpack-inlining Change
buildDuration 10.5s 10.8s ⚠️ +247ms
nodeModulesSize 80.8 MB 77.5 MB -3.34 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.185 2.222 ⚠️ +0.04
/ avg req/sec 1144.15 1125.08 ⚠️ -19.07
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.6 1.649 ⚠️ +0.05
/error-in-render avg req/sec 1562.47 1516.37 ⚠️ -46.1
Client Bundles (main, webpack, commons)
vercel/next.js canary guybedford/next.js webpack-inlining Change
677f882d2ed8..b025.js gzip 13.1 kB 13.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-e66dcae..6635.js gzip 6.63 kB 6.63 kB ✓
webpack-50be..df5b.js gzip 751 B 751 B ✓
Overall change 59.4 kB 59.4 kB ✓
Legacy Client Bundles (polyfills) Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
polyfills-81..14d7.js gzip 31.2 kB 31.3 kB ⚠️ +97 B
Overall change 31.2 kB 31.3 kB ⚠️ +97 B
Client Pages
vercel/next.js canary guybedford/next.js webpack-inlining Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
hooks-c71ae4..70cd.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary guybedford/next.js webpack-inlining Change
_buildManifest.js gzip 321 B 321 B ✓
Overall change 321 B 321 B ✓
Rendered Page Sizes
vercel/next.js canary guybedford/next.js webpack-inlining Change
index.html gzip 615 B 614 B -1 B
link.html gzip 619 B 620 B ⚠️ +1 B
withRouter.html gzip 608 B 608 B ✓
Overall change 1.84 kB 1.84 kB ✓

Diffs

Diff for main-bbfb833..0f987beed.js 
@@ -1588,22 +1588,22 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             }
           };
           var e = {};
-          function __webpack_require__(n) {
+          function __nccwpck_require__(n) {
             if (e[n]) {
               return e[n].exports;
             }
             var i = (e[n] = { exports: {} });
             var a = true;
             try {
-              t[n].call(i.exports, i, i.exports, __webpack_require__);
+              t[n].call(i.exports, i, i.exports, __nccwpck_require__);
               a = false;
             } finally {
               if (a) delete e[n];
             }
             return i.exports;
           }
-          __webpack_require__.ab = __dirname + "/";
-          return __webpack_require__(599);
+          __nccwpck_require__.ab = __dirname + "/";
+          return __nccwpck_require__(599);
         })();
         /* WEBPACK VAR INJECTION */
       }.call(this, "/"));
Diff for polyfills-ae..7af5f55f8.js 
@@ -6637,7 +6637,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         })();
 
         /* WEBPACK VAR INJECTION */
-      }.call(this, __webpack_require__("yLpj")));
+      }.call(this, __webpack_require__("ntbh")));
 
       /***/
     },
@@ -6650,27 +6650,89 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       /***/
     },
 
-    /***/ yLpj: /***/ function(module, exports) {
-      var g;
+    /***/ ntbh: /***/ function(module, exports) {
+      /* WEBPACK VAR INJECTION */ (function(__dirname) {
+        module.exports = /******/ (function() {
+          // webpackBootstrap
+          /******/ var __webpack_modules__ = {
+            /***/ 149: /***/ function(module) {
+              var g;
 
-      // This works in non-strict mode
-      g = (function() {
-        return this;
-      })();
+              // This works in non-strict mode
+              g = (function() {
+                return this;
+              })();
+
+              try {
+                // This works if eval is allowed (see CSP)
+                g = g || new Function("return this")();
+              } catch (e) {
+                // This works if the window reference is available
+                if (typeof window === "object") g = window;
+              }
+
+              // g can still be undefined, but nothing to do about it...
+              // We return undefined, instead of nothing here, so it's
+              // easier to handle this case. if(!global) { ...}
+
+              module.exports = g;
 
-      try {
-        // This works if eval is allowed (see CSP)
-        g = g || new Function("return this")();
-      } catch (e) {
-        // This works if the window reference is available
-        if (typeof window === "object") g = window;
-      }
+              /***/
+            }
+
+            /******/
+          }; // The module cache
+          /************************************************************************/
+          /******/ /******/ var __webpack_module_cache__ = {}; // The require function
+          /******/
+
+          /******/ /******/ function __nccwpck_require__(moduleId) {
+            /******/ // Check if module is in cache
+            /******/ if (__webpack_module_cache__[moduleId]) {
+              /******/ return __webpack_module_cache__[moduleId].exports;
+              /******/
+            } // Create a new module (and put it into the cache)
+            /******/ /******/ var module = (__webpack_module_cache__[
+              moduleId
+            ] = {
+              /******/ // no module.id needed
+              /******/ // no module.loaded needed
+              /******/ exports: {}
+              /******/
+            }); // Execute the module function
+            /******/
+
+            /******/ /******/ var threw = true;
+            /******/ try {
+              /******/ __webpack_modules__[moduleId](
+                module,
+                module.exports,
+                __nccwpck_require__
+              );
+              /******/ threw = false;
+              /******/
+            } finally {
+              /******/ if (threw) delete __webpack_module_cache__[moduleId];
+              /******/
+            } // Return the exports of the module
+            /******/
+
+            /******/ /******/ return module.exports;
+            /******/
+          } /* webpack/runtime/compat */
+          /******/
 
-      // g can still be undefined, but nothing to do about it...
-      // We return undefined, instead of nothing here, so it's
-      // easier to handle this case. if(!global) { ...}
+          /************************************************************************/
+          /******/ /******/
 
-      module.exports = g;
+          /******/ __nccwpck_require__.ab =
+            __dirname +
+            "/"; /************************************************************************/ // module exports must be returned from runtime so entry inlining is disabled // startup // Load entry module and return exports
+          /******/ /******/ /******/ /******/ return __nccwpck_require__(149);
+          /******/
+        })();
+        /* WEBPACK VAR INJECTION */
+      }.call(this, "/"));
 
       /***/
     }
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -50,10 +50,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-7cd0807c85ae48513b2d.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -55,10 +55,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-7cd0807c85ae48513b2d.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      href="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       as="script"
     />
     <link
@@ -50,10 +50,10 @@
     </script>
     <script
       nomodule=""
-      src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
+      src="/_next/static/chunks/polyfills-7cd0807c85ae48513b2d.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-bbfb83378550f987beed.js"
+      src="/_next/static/chunks/main-9d9d9bf2222f41e772d5.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary guybedford/next.js webpack-inlining Change
buildDuration 12.9s 12.9s ⚠️ +40ms
nodeModulesSize 80.8 MB 77.5 MB -3.34 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary guybedford/next.js webpack-inlining Change
677f882d2ed8..b025.js gzip 13.1 kB 13.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-e66dcae..6635.js gzip 6.63 kB N/A N/A
webpack-50be..df5b.js gzip 751 B 751 B ✓
main-9d28255..78cd.js gzip N/A 6.63 kB N/A
Overall change 59.4 kB 59.4 kB ✓
Legacy Client Bundles (polyfills) Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
polyfills-81..14d7.js gzip 31.2 kB N/A N/A
polyfills-af..9390.js gzip N/A 31.3 kB N/A
Overall change 31.2 kB 31.3 kB ⚠️ +97 B
Client Pages
vercel/next.js canary guybedford/next.js webpack-inlining Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB ✓
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB ✓
hooks-c71ae4..70cd.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary guybedford/next.js webpack-inlining Change
_buildManifest.js gzip 321 B 321 B ✓
Overall change 321 B 321 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary guybedford/next.js webpack-inlining Change
_error.js 1 MB 1 MB ⚠️ +1.81 kB
404.html 2.67 kB 2.67 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1 MB 1 MB ⚠️ +1.81 kB
link.js 1.06 MB 1.06 MB ⚠️ +1.81 kB
routerDirect.js 1.05 MB 1.05 MB ⚠️ +1.81 kB
withRouter.js 1.05 MB 1.05 MB ⚠️ +1.81 kB
Overall change 5.18 MB 5.18 MB ⚠️ +9.05 kB
Commit: 4641bd3
@Timer
Timer approved these changes Jan 14, 2021
View changes
@ijjk
ijjk approved these changes Jan 14, 2021
View changes
@Timer Timer changed the title feat: Webpack inlining with configuration for v4 / v5 feat: webpack inlining with configuration for v4 / v5 Jan 14, 2021
@Timer Timer merged commit bddb022 into vercel:canary Jan 14, 2021
29 of 31 checks passed
29 of 31 checks passed
build
Details
Cancel Previous Runs
Details
Cancel Previous Runs
Details
PR Stats
Details
testYarnPnP
Details
React 17 + webpack 5 (Basic, Production, Acceptance)
Details
lint
Details
Check Pre-compiled
Details
Test Unit
Details
Test Integration (1)
Details
Test Integration (2)
Details
Test Integration (3)
Details
Test Integration (4)
Details
Test Integration (5)
Details
Test Integration (6)
Details
Test Electron
Details
Test Firefox (production)
Details
Test Safari (production)
Details
thank you, next
Details
Test Safari 10.1 (nav)
Details
Potentially publish release
Details
Release Stats
Details
azure next.js Build #20210113.39 had test failures
Details
azure next.js (Test test_chrome_integration node-10-2) Test test_chrome_integration node-10-2 failed
Details
kodiakhq: status ⚠️ problem contacting GitHub API with method 'pull_request/merge'
Details
azure next.js (Build build) Build build succeeded
Details
azure next.js (Test test_chrome_integration node-10-1) Test test_chrome_integration node-10-1 succeeded
Details
azure next.js (Test test_chrome_integration node-10-3) Test test_chrome_integration node-10-3 succeeded
Details
azure next.js (Test test_chrome_integration node-10-4) Test test_chrome_integration node-10-4 succeeded
Details
azure next.js (Test test_ie11_production) Test test_ie11_production succeeded
Details
azure next.js (Test test_unit) Test test_unit succeeded
Details
@guybedford guybedford mentioned this pull request Jan 14, 2021
Merged
kodiakhq bot pushed a commit that referenced this pull request Jan 15, 2021
@guybedford
feat: Webpack loader inlining (#21127)
Verified
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: 4AEE18F83AFDEB23 Learn about signing commits
Loading status checks…
005a8ab 
This picks up on the inlining work in #20598 to also include webpack loader inlining optimizations.

This includes:
* The dependencies of sass-loader
* resolve-url-loader

And for added benefit:
* babel-plugin-transform-define
* babel-plugin-transform-react-remove-prop-types

style-loader and css-loader didn't inline easily. Perhaps we can come back to these ones.
@wyattanderson
Copy link

@wyattanderson wyattanderson commented Jan 31, 2021

The major possible concern with this PR remains the same as the previous attempts - users relying on import webpack from 'webpack' to reference the Next.js webpack version.

What's the right way for plugins to reference the Next.js webpack version going forward? This change appears to have broken the webpack plugin for the Treat CSS framework.

Let me know if I should file an additional issue. I'm happy to put in a PR to Treat if it's as simple as changing the webpack module references to next/dist/compiled/webpack/webpack, though I kinda dread dealing with compatibility between Next 10.0.5 and 10.0.6.
@wyattanderson wyattanderson mentioned this pull request Jan 31, 2021
Closed
@skidding skidding mentioned this pull request Feb 1, 2021
Open
@brandonchinn178 brandonchinn178 mentioned this pull request Mar 26, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Timer Timer

@ijjk ijjk

@lfades lfades

@timneutkens timneutkens

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

Successfully merging this pull request may close these issues.

None yet

4 participants
@guybedford @ijjk @wyattanderson @Timer