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.

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:

@vercel vercel bot temporarily deployed to Preview December 30, 2020 05:22 Inactive
@ijjk

This comment has been minimized.

Sign in to view
Timer
Timer reviewed Dec 30, 2020
View reviewed 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
@vercel vercel bot temporarily deployed to Preview December 30, 2020 23:28 Inactive
@ijjk

This comment has been minimized.

Sign in to view
@vercel vercel bot temporarily deployed to Preview December 31, 2020 03:21 Inactive
@ijjk

This comment has been minimized.

Sign in to view
@vercel vercel bot temporarily deployed to Preview December 31, 2020 04:04 Inactive
@vercel vercel bot temporarily deployed to Preview December 31, 2020 04:14 Inactive
@vercel vercel bot temporarily deployed to Preview December 31, 2020 04:20 Inactive
@ijjk

This comment has been minimized.

Sign in to view
@vercel vercel bot temporarily deployed to Preview December 31, 2020 05:32 Inactive
@vercel vercel bot temporarily deployed to Preview December 31, 2020 05:39 Inactive
@ijjk

This comment has been minimized.

Sign in to view
@vercel vercel bot temporarily deployed to Preview December 31, 2020 05:53 Inactive
@ijjk

This comment has been minimized.

Sign in to view
@vercel vercel bot temporarily deployed to Preview December 31, 2020 10:22 Inactive
@ijjk

This comment has been minimized.

Sign in to view
Timer
Timer previously approved these changes Jan 13, 2021
View reviewed changes
@ijjk

This comment has been minimized.

Sign in to view
@ijjk

This comment has been minimized.

Sign in to view
@ijjk
Copy link
Member

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)

@ijjk
Copy link
Member

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 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

@ijjk
Copy link
Member

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
Copy link
Member

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 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
@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)
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

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
@ovidiuch ovidiuch mentioned this pull request Feb 1, 2021
Closed
@brandonchinn178 brandonchinn178 mentioned this pull request Mar 26, 2021
Merged
@tomrav tomrav mentioned this pull request Apr 7, 2021
Closed
@fabb fabb mentioned this pull request Jul 22, 2021
Closed
@fabb
Copy link
Contributor

fabb commented Jul 22, 2021

inlining breaks the next-plugin-custom-babel-config: josephluck/next-plugin-custom-babel-config#8

@nicholasio nicholasio mentioned this pull request Sep 22, 2021
Closed
6 tasks
@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

@Timer Timer Timer approved these changes

@ijjk ijjk ijjk approved these changes

@lfades lfades Awaiting requested review from lfades

@timneutkens timneutkens Awaiting requested review from timneutkens timneutkens 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
5 participants
@guybedford @ijjk @wyattanderson @fabb @Timer