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

fixes to allow lazy compilation for import() #32441

Merged
merged 2 commits into from Dec 14, 2021

Conversation

sokra
Copy link
Member

@sokra sokra commented Dec 13, 2021

This allows to use the webpack lazy compilation feature for lazy compiling import()s on client side with next.js:

module.exports = {
  webpack(config, { isServer, dev }) {
    if (!isServer && dev) {
      config.experiments.lazyCompilation = true
    }
    return config
  },
}

lazy compilation for entries is not possible and not needed as next.js has it's own lazy compilation of entries.
lazy compilation on server-side is not (yet) possible since there is not HMR on server-side with next.js.

Bug

  • Related issues linked using fixes #number
  • Integration tests added
  • Errors have helpful link attached, see contributing.md

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.
  • Errors have helpful link attached, see contributing.md

Documentation / Examples

  • Make sure the linting passes by running yarn lint

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Dec 13, 2021
@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@sokra sokra force-pushed the feature/lazy-compilation branch 2 times, most recently from ae04c3c to e1245f3 Compare December 13, 2021 15:16
@ijjk
Copy link
Member

ijjk commented Dec 13, 2021

Failing test suites

Commit: e1245f3

test/integration/app-document-add-hmr/test/index.test.js

  • _app/_document add HMR > should HMR when _document is added
Expand output

● _app/_document add HMR › should HMR when _document is added

expect(received).toContain(expected) // indexOf

Expected substring: "index page"
Received string:    "<head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><meta name=\"next-head-count\" content=\"2\"><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1639408902327\"></script><script src=\"/_next/static/chunks/fallback/webpack.js?ts=1639408902327\" defer=\"\"></script><script src=\"/_next/static/chunks/fallback/main.js?ts=1639408902327\" defer=\"\"></script><script src=\"/_next/static/chunks/fallback/pages/_app.js?ts=1639408902327\" defer=\"\"></script><script src=\"/_next/static/chunks/fallback/pages/_error.js?ts=1639408902327\" defer=\"\"></script><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body style=\"overflow: hidden;\"><div id=\"__next\" data-reactroot=\"\"></div><script src=\"/_next/static/chunks/fallback/react-refresh.js?ts=1639408902327\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"ModuleBuildError\",\"message\":\"Module build failed (from ../../../packages/next/dist/build/webpack/loaders/next-swc-loader.js):\\nError: Failed to read source code from /home/runner/work/next.js/next.js/test/integration/app-document-add-hmr/pages/_app.js\\n\\nCaused by:\\n    No such file or directory (os error 2)\",\"stack\":\"ModuleBuildError: Module build failed (from ../../../packages/next/dist/build/webpack/loaders/next-swc-loader.js):\\nError: Failed to read source code from /home/runner/work/next.js/next.js/test/integration/app-document-add-hmr/pages/_app.js\\n\\nCaused by:\\n    No such file or directory (os error 2)\\n    at processResult (/home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:54452:19)\\n    at /home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:54554:5\\n    at /home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:140425:11\\n    at /home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:140221:20\\n    at context.callback (/home/runner/work/next.js/next.js/packages/next/dist/compiled/webpack/bundle5.js:140150:13)\"},\"gip\":true,\"scriptLoader\":[]}</script><div id=\"__next-build-watcher\" style=\"position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;\"></div><next-route-announcer><p aria-live=\"assertive\" id=\"__next-route-announcer__\" role=\"alert\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;\"></p></next-route-announcer><nextjs-portal></nextjs-portal></body>"

  54 |       await fs.remove(appPage)
  55 |     }
> 56 |   })
     |     ^
  57 |
  58 |   it('should HMR when _document is added', async () => {
  59 |     let indexContent = await fs.readFile(indexPage)

  at Object.<anonymous> (integration/app-document-add-hmr/test/index.test.js:56:27)

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented Dec 13, 2021

Stats from current PR

Default Build (Decrease detected ✓)
General Overall decrease ✓
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
buildDuration 17.8s 17.8s ⚠️ +94ms
buildDurationCached 3.3s 3.3s ⚠️ +7ms
nodeModulesSize 350 MB 350 MB -388 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
/ failed reqs 0 0
/ total time (seconds) 2.93 2.885 -0.05
/ avg req/sec 853.35 866.45 +13.1
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.319 1.346 ⚠️ +0.03
/error-in-render avg req/sec 1896 1857.51 ⚠️ -38.49
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
450.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.2 kB 42.2 kB
main-HASH.js gzip 28.9 kB 28.9 kB
webpack-HASH.js gzip 1.45 kB 1.45 kB
Overall change 72.8 kB 72.8 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
_app-HASH.js gzip 1.37 kB 1.37 kB
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 312 B 312 B
css-HASH.js gzip 326 B 326 B
dynamic-HASH.js gzip 2.37 kB 2.37 kB ⚠️ +2 B
head-HASH.js gzip 350 B 350 B
hooks-HASH.js gzip 919 B 919 B
image-HASH.js gzip 4.73 kB 4.73 kB
index-HASH.js gzip 263 B 263 B
link-HASH.js gzip 2.13 kB 2.13 kB
routerDirect..HASH.js gzip 321 B 321 B
script-HASH.js gzip 383 B 383 B
withRouter-HASH.js gzip 318 B 318 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.1 kB 14.1 kB ⚠️ +2 B
Client Build Manifests
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
_buildManifest.js gzip 459 B 459 B
Overall change 459 B 459 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
index.html gzip 531 B 531 B
link.html gzip 545 B 545 B
withRouter.html gzip 526 B 526 B
Overall change 1.6 kB 1.6 kB

Diffs

Diff for _buildManifest.js
@@ -8,7 +8,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fcss-97182c5b8324021a.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-04217a0b90b030bc.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-6b716f7c69fc6182.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
Diff for dynamic-HASH.js
@@ -374,44 +374,41 @@
         if (false) {
         }
         // Client only
-        if (
-          !initialized &&
-          "object" !== "undefined" &&
-          typeof opts.webpack === "function" &&
-          "function" === "function" &&
-          !opts.suspense
-        ) {
-          var moduleIds = opts.webpack();
-          READY_INITIALIZERS.push(function(ids) {
-            var _iteratorNormalCompletion = true,
-              _didIteratorError = false,
-              _iteratorError = undefined;
-            try {
-              for (
-                var _iterator = moduleIds[Symbol.iterator](), _step;
-                !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
-                _iteratorNormalCompletion = true
-              ) {
-                var moduleId = _step.value;
-                if (ids.indexOf(moduleId) !== -1) {
-                  return init();
-                }
-              }
-            } catch (err) {
-              _didIteratorError = true;
-              _iteratorError = err;
-            } finally {
+        if (!initialized && "object" !== "undefined" && !opts.suspense) {
+          var moduleIds = opts.webpack ? opts.webpack() : opts.modules;
+          if (moduleIds) {
+            READY_INITIALIZERS.push(function(ids) {
+              var _iteratorNormalCompletion = true,
+                _didIteratorError = false,
+                _iteratorError = undefined;
               try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                  _iterator.return();
+                for (
+                  var _iterator = moduleIds[Symbol.iterator](), _step;
+                  !(_iteratorNormalCompletion = (_step = _iterator.next())
+                    .done);
+                  _iteratorNormalCompletion = true
+                ) {
+                  var moduleId = _step.value;
+                  if (ids.indexOf(moduleId) !== -1) {
+                    return init();
+                  }
                 }
+              } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
               } finally {
-                if (_didIteratorError) {
-                  throw _iteratorError;
+                try {
+                  if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                  }
+                } finally {
+                  if (_didIteratorError) {
+                    throw _iteratorError;
+                  }
                 }
               }
-            }
-          });
+            });
+          }
         }
         var LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
         LoadableComponent.preload = function() {

Default Build with SWC (Decrease detected ✓)
General Overall decrease ✓
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
buildDuration 19.3s 19.6s ⚠️ +321ms
buildDurationCached 3.4s 3.3s -81ms
nodeModulesSize 350 MB 350 MB -388 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
/ failed reqs 0 0
/ total time (seconds) 2.998 2.983 -0.02
/ avg req/sec 833.94 837.95 +4.01
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.348 1.375 ⚠️ +0.03
/error-in-render avg req/sec 1854.02 1818.5 ⚠️ -35.52
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
450.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.3 kB 42.3 kB
main-HASH.js gzip 29.1 kB 29.1 kB
webpack-HASH.js gzip 1.44 kB 1.44 kB
Overall change 73 kB 73 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
_app-HASH.js gzip 1.35 kB 1.35 kB
_error-HASH.js gzip 180 B 180 B
amp-HASH.js gzip 305 B 305 B
css-HASH.js gzip 321 B 321 B
dynamic-HASH.js gzip 2.36 kB 2.36 kB ⚠️ +3 B
head-HASH.js gzip 342 B 342 B
hooks-HASH.js gzip 906 B 906 B
image-HASH.js gzip 4.75 kB 4.75 kB
index-HASH.js gzip 256 B 256 B
link-HASH.js gzip 2.19 kB 2.19 kB
routerDirect..HASH.js gzip 314 B 314 B
script-HASH.js gzip 375 B 375 B
withRouter-HASH.js gzip 309 B 309 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.1 kB 14.1 kB ⚠️ +3 B
Client Build Manifests
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
_buildManifest.js gzip 459 B 459 B
Overall change 459 B 459 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js feature/lazy-compilation Change
index.html gzip 532 B 532 B
link.html gzip 546 B 546 B
withRouter.html gzip 527 B 527 B
Overall change 1.6 kB 1.6 kB

Diffs

Diff for _buildManifest.js
@@ -8,7 +8,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fcss-97182c5b8324021a.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-04217a0b90b030bc.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-6b716f7c69fc6182.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
Diff for dynamic-HASH.js
@@ -374,44 +374,41 @@
         if (false) {
         }
         // Client only
-        if (
-          !initialized &&
-          "object" !== "undefined" &&
-          typeof opts.webpack === "function" &&
-          "function" === "function" &&
-          !opts.suspense
-        ) {
-          var moduleIds = opts.webpack();
-          READY_INITIALIZERS.push(function(ids) {
-            var _iteratorNormalCompletion = true,
-              _didIteratorError = false,
-              _iteratorError = undefined;
-            try {
-              for (
-                var _iterator = moduleIds[Symbol.iterator](), _step;
-                !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
-                _iteratorNormalCompletion = true
-              ) {
-                var moduleId = _step.value;
-                if (ids.indexOf(moduleId) !== -1) {
-                  return init();
-                }
-              }
-            } catch (err) {
-              _didIteratorError = true;
-              _iteratorError = err;
-            } finally {
+        if (!initialized && "object" !== "undefined" && !opts.suspense) {
+          var moduleIds = opts.webpack ? opts.webpack() : opts.modules;
+          if (moduleIds) {
+            READY_INITIALIZERS.push(function(ids) {
+              var _iteratorNormalCompletion = true,
+                _didIteratorError = false,
+                _iteratorError = undefined;
               try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                  _iterator.return();
+                for (
+                  var _iterator = moduleIds[Symbol.iterator](), _step;
+                  !(_iteratorNormalCompletion = (_step = _iterator.next())
+                    .done);
+                  _iteratorNormalCompletion = true
+                ) {
+                  var moduleId = _step.value;
+                  if (ids.indexOf(moduleId) !== -1) {
+                    return init();
+                  }
                 }
+              } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
               } finally {
-                if (_didIteratorError) {
-                  throw _iteratorError;
+                try {
+                  if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                  }
+                } finally {
+                  if (_didIteratorError) {
+                    throw _iteratorError;
+                  }
                 }
               }
-            }
-          });
+            });
+          }
         }
         var LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
         LoadableComponent.preload = function() {
Commit: 83c69a9

@sokra sokra marked this pull request as ready for review December 14, 2021 08:57
@timneutkens timneutkens merged commit ee22073 into canary Dec 14, 2021
@timneutkens timneutkens deleted the feature/lazy-compilation branch December 14, 2021 10:33
cdierkens pushed a commit to cdierkens/next.js that referenced this pull request Dec 20, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants