docs: add guide to disable styled-components babel plugin (#4895)

packages/document/builder-doc/docs/en/config/tools/styledComponents.md

@@ -40,4 +40,13 @@ export default {
 };
 ```
 
-This feature is enabled by default, configuring it to `false` can disable this behaviour.
+The feature is enabled by default, and you can configure `tools.styledComponents` to `false` to disable this behavior, which can improve build performance:
+
+```js
+export default {
+  tools: {
+    styledComponents: false,
+  },
+};
+```
+

packages/document/builder-doc/docs/en/guide/faq/exceptions.md

@@ -256,6 +256,20 @@ export default {
 };
 ```
 
+In addition to the reasons mentioned above, there is another possibility that can cause Babel compilation to hang, which is when Babel compiles a large JS file exceeding 10,000 lines (usually a large file in the node_modules directory that is compiled using `source.include`).
+
+When Babel compiles large files, the built-in babel-plugin-styled-components in Modern.js can cause the compilation to hang. There is already a [relevant issue]((https://github.com/styled-components/babel-plugin-styled-components/issues/374)) in the community .
+
+In the future, Modern.js will consider removing the built-in babel-plugin-styled-components. In the current version, you can set [tools.styledComponents](/configure/app/tools/styled-components.html) to `false` to remove this plugin.
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    styledComponents: false,
+  },
+};
+```
+
 ---
 
 ### The webpack cache does not work?

packages/document/builder-doc/docs/zh/config/tools/styledComponents.md

@@ -39,4 +39,12 @@ export default {
 };
 ```
 
-该特性默认启用，可以配置为 `false` 关闭该行为。
+该特性默认启用，你可以配置 `tools.styledComponents` 为 `false` 来关闭该行为，关闭后可以提升编译性能：
+
+```js
+export default {
+  tools: {
+    styledComponents: false,
+  },
+};
+```

packages/document/builder-doc/docs/zh/guide/faq/exceptions.md

@@ -256,6 +256,20 @@ export default {
 };
 ```
 
+除了上述原因外，还有一种可能会导致 Babel 编译卡死，就是使用 Babel 编译了一个超过 1 万行的大型 JS 文件（通常是使用 `source.include` 编译了 node_modules 中的某个大文件）。
+
+当 Babel 编译大文件时，Modern.js 内置的 babel-plugin-styled-components 会卡死，社区中已有 [相关 issue](https://github.com/styled-components/babel-plugin-styled-components/issues/374)。
+
+未来 Modern.js 会考虑移除内置的 babel-plugin-styled-components。在当前版本里，你可以将 [tools.styledComponents](/configure/app/tools/styled-components.html) 设置为 `false` 来移除该插件。
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    styledComponents: false,
+  },
+};
+```
+
 ---
 
 ### webpack 编译缓存未生效，应该如何排查？