chore: handle next.js build issue

[zombieJ]

中文版模板 / Chinese template

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

close #48758

Reported this to Next.js repo: vercel/next.js#65512

💡 Background and solution

I do believe it's not antd bug. But a strange mix bug with Next.js & babel & Webpack.

Dig the build process of next build found the first compile of webpack is work as expected. But the Generating static page step will hang for a long time.

After debug the break point or dump the memory heap, there is nothing special about this. Break point is normal for the parsing and memory heap is stable (for antd with nextjs example, it's stable between ~80MB). It takes me lots of time, sad 😅.

Since 5.16.5 works well, it can use the resolution of package.json to check all the diff dependencies version. And finally found that lock rc-field-form to v1 version will back of the speed.

{
  "resolutions": {
    "rc-field-form": "1.44.0"
  }
}

After that, check what changed in rc-field-form v2.0.0, and found the deps async-validator replaced with @rc-component/async-validator. What change is using father@4 & correct the type definition.

Modify the node_modules/@rc-component/async-validator code to check what happened:

--  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
--  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
--  import _typeof from "@babel/runtime/helpers/esm/typeof";
--  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
--  import _createClass from "@babel/runtime/helpers/esm/createClass";
--  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
--  import { messages as defaultMessages, newMessages } from "./messages";
--  import { asyncMap, complementError, convertFieldsError, deepMerge, format, isEmptyValue, warning } from "./util";
--  import validators from "./validator/index";
--  export * from "./interface";

--  /**
--   *  Encapsulates a validation schema.
--   *
--   *  @param descriptor An object declaring validation rules
--   *  for this schema.
--   */
--  var Schema = /*#__PURE__*/function () {
--    function Schema(descriptor) {
--      _classCallCheck(this, Schema);
--  // ...

++  export default function() {}
  }

The build speed back again. But when back of the import, it becomes slow again:

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { messages as defaultMessages, newMessages } from "./messages";
import { asyncMap, complementError, convertFieldsError, deepMerge, format, isEmptyValue, warning } from "./util";
import validators from "./validator/index";

export default function() {}

I guess it must have some dependencies cycle in it but finally get none. All the files dependencies is clear. So it have to comment code in it to check what make it slow. Skip the checking process, it comes from the follow code:

// @rc-component/async-validator@5.0.2/es/rule/url.js

// ...
var v6 = "\n(?:\n(?:".concat(v6seg, ":){7}(?:").concat(v6seg, "|:)|                                    // 1:2:3:4:5:6:7::  1:2:3:4:5:6:7:8\n(?:").concat(v6seg, ":){6}(?:").concat(v4, "|:").concat(v6seg, "|:)|                             // 1:2:3:4:5:6::    1:2:3:4:5:6::8   1:2:3:4:5:6::8  1:2:3:4:5:6::1.2.3.4\n(?:").concat(v6seg, ":){5}(?::").concat(v4, "|(?::").concat(v6seg, "){1,2}|:)|                   // 1:2:3:4:5::      1:2:3:4:5::7:8   1:2:3:4:5::8    1:2:3:4:5::7:1.2.3.4\n(?:").concat(v6seg, ":){4}(?:(?::").concat(v6seg, "){0,1}:").concat(v4, "|(?::").concat(v6seg, "){1,3}|:)| // 1:2:3:4::        1:2:3:4::6:7:8   1:2:3:4::8      1:2:3:4::6:7:1.2.3.4\n(?:").concat(v6seg, ":){3}(?:(?::").concat(v6seg, "){0,2}:").concat(v4, "|(?::").concat(v6seg, "){1,4}|:)| // 1:2:3::          1:2:3::5:6:7:8   1:2:3::8        1:2:3::5:6:7:1.2.3.4\n(?:").concat(v6seg, ":){2}(?:(?::").concat(v6seg, "){0,3}:").concat(v4, "|(?::").concat(v6seg, "){1,5}|:)| // 1:2::            1:2::4:5:6:7:8   1:2::8          1:2::4:5:6:7:1.2.3.4\n(?:").concat(v6seg, ":){1}(?:(?::").concat(v6seg, "){0,4}:").concat(v4, "|(?::").concat(v6seg, "){1,6}|:)| // 1::              1::3:4:5:6:7:8   1::8            1::3:4:5:6:7:1.2.3.4\n(?::(?:(?::").concat(v6seg, "){0,5}:").concat(v4, "|(?::").concat(v6seg, "){1,7}|:))             // ::2:3:4:5:6:7:8  ::2:3:4:5:6:7:8  ::8             ::1.2.3.4\n)(?:%[0-9a-zA-Z]{1,})?                                             // %eth0            %1\n").replace(/\s*\/\/.*$/gm, '').replace(/\n/g, '').trim();

// ...

Source code:

const v6 = `
(?:
(?:${v6seg}:){7}(?:${v6seg}|:)|                                    // 1:2:3:4:5:6:7::  1:2:3:4:5:6:7:8
(?:${v6seg}:){6}(?:${v4}|:${v6seg}|:)|                             // 1:2:3:4:5:6::    1:2:3:4:5:6::8   1:2:3:4:5:6::8  1:2:3:4:5:6::1.2.3.4
(?:${v6seg}:){5}(?::${v4}|(?::${v6seg}){1,2}|:)|                   // 1:2:3:4:5::      1:2:3:4:5::7:8   1:2:3:4:5::8    1:2:3:4:5::7:1.2.3.4
(?:${v6seg}:){4}(?:(?::${v6seg}){0,1}:${v4}|(?::${v6seg}){1,3}|:)| // 1:2:3:4::        1:2:3:4::6:7:8   1:2:3:4::8      1:2:3:4::6:7:1.2.3.4
(?:${v6seg}:){3}(?:(?::${v6seg}){0,2}:${v4}|(?::${v6seg}){1,4}|:)| // 1:2:3::          1:2:3::5:6:7:8   1:2:3::8        1:2:3::5:6:7:1.2.3.4
(?:${v6seg}:){2}(?:(?::${v6seg}){0,3}:${v4}|(?::${v6seg}){1,5}|:)| // 1:2::            1:2::4:5:6:7:8   1:2::8          1:2::4:5:6:7:1.2.3.4
(?:${v6seg}:){1}(?:(?::${v6seg}){0,4}:${v4}|(?::${v6seg}){1,6}|:)| // 1::              1::3:4:5:6:7:8   1::8            1::3:4:5:6:7:1.2.3.4
(?::(?:(?::${v6seg}){0,5}:${v4}|(?::${v6seg}){1,7}|:))             // ::2:3:4:5:6:7:8  ::2:3:4:5:6:7:8  ::8             ::1.2.3.4
)(?:%[0-9a-zA-Z]{1,})?                                             // %eth0            %1
`
  .replace(/\s*\/\/.*$/gm, '')
  .replace(/\n/g, '')
  .trim();

The compiled code in async-validator package:

var v6 = ("\n(?:\n(?:" + v6seg + ":){7}(?:" + v6seg + "|:)|                                    // 1:2:3:4:5:6:7::  1:2:3:4:5:6:7:8\n(?:" + v6seg + ":){6}(?:" + v4 + "|:" + v6seg + "|:)|                             // 1:2:3:4:5:6::    1:2:3:4:5:6::8   1:2:3:4:5:6::8  1:2:3:4:5:6::1.2.3.4\n(?:" + v6seg + ":){5}(?::" + v4 + "|(?::" + v6seg + "){1,2}|:)|                   // 1:2:3:4:5::      1:2:3:4:5::7:8   1:2:3:4:5::8    1:2:3:4:5::7:1.2.3.4\n(?:" + v6seg + ":){4}(?:(?::" + v6seg + "){0,1}:" + v4 + "|(?::" + v6seg + "){1,3}|:)| // 1:2:3:4::        1:2:3:4::6:7:8   1:2:3:4::8      1:2:3:4::6:7:1.2.3.4\n(?:" + v6seg + ":){3}(?:(?::" + v6seg + "){0,2}:" + v4 + "|(?::" + v6seg + "){1,4}|:)| // 1:2:3::          1:2:3::5:6:7:8   1:2:3::8        1:2:3::5:6:7:1.2.3.4\n(?:" + v6seg + ":){2}(?:(?::" + v6seg + "){0,3}:" + v4 + "|(?::" + v6seg + "){1,5}|:)| // 1:2::            1:2::4:5:6:7:8   1:2::8          1:2::4:5:6:7:1.2.3.4\n(?:" + v6seg + ":){1}(?:(?::" + v6seg + "){0,4}:" + v4 + "|(?::" + v6seg + "){1,6}|:)| // 1::              1::3:4:5:6:7:8   1::8            1::3:4:5:6:7:1.2.3.4\n(?::(?:(?::" + v6seg + "){0,5}:" + v4 + "|(?::" + v6seg + "){1,7}|:))             // ::2:3:4:5:6:7:8  ::2:3:4:5:6:7:8  ::8             ::1.2.3.4\n)(?:%[0-9a-zA-Z]{1,})?                                             // %eth0            %1\n").replace(/\s*\/\/.*$/gm, '').replace(/\n/g, '').trim(); // Pre-compile only the exact regexes because adding a global flag make regexes stateful

The difference is the string concat replaced by babel with .concat function. When replace the code with the original one, Next.js fast again.

I'm not sure why the long .concat makes Next.js slow. But for antd side, we can do the workaround:

// It can also modify babel config, but it's not recommended
  const v6List = [
    `regSampleTxt1${var}`,
    `regSampleTxt2${var}`,
    `regSampleTxt3${var}`,
    ...
  ];
  const v6Eth0 = `(?:%[0-9a-zA-Z]{1,})?`; // %eth0            %1

  const v6 = `(?:${v6List.join('|')})${v6Eth0}`;

Fixed with magic code. But Next.js may need help to check on this.

📝 Changelog

Language	Changelog
🇺🇸 English	MISC: Workaround for Next.js build bad perf issue.
🇨🇳 Chinese	MISC: 调整代码以解决 Next.js 编译性能问题。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

[github-actions]

👁 Visual Regression Report for PR #48829 Passed ✅

🎯 Target branch: master (766ae3b)
📖 View Full Report ↗︎

🎊 Congrats! No visual-regression diff found.

[github-actions]

size-limit report 📦

Path	Size
./dist/antd.min.js	337.62 KB
./dist/antd-with-locales.min.js	385.46 KB

[afc163]

Great job! @zombieJ

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (f0189fd) to head (aa887a2).
Report is 4 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #48829   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          746       746           
  Lines        12996     13009   +13     
  Branches      3412      3419    +7     
=========================================
+ Hits         12996     13009   +13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.