docs: extract document of ua polyfill to components folder (#3705)

* docs: extract document of ua polyfill to components folder

* docs: add benchmark link

Author: chenjiahan

README.md

@@ -40,6 +40,10 @@ The following solutions are available within the Modern.js ecosystem:
 - 🐟 [Garfish](https://github.com/web-infra-dev/garfish): A powerful micro front-end framework.
 - 🦆 [Reduck](https://github.com/web-infra-dev/reduck): A redux-based state management library.
 
+## Benchmark
+
+We use [Modern.js Benchmark](https://web-infra-dev.github.io/modern-js-benchmark/) to observe the trend of key metrics, such as bundle size, compile speed and install size.
+
 ## Contributing
 
 > New contributors welcome!

README.zh-CN.md

@@ -40,6 +40,10 @@ Modern.js 生态提供了以下解决方案：
 - 🐟 [Garfish](https://github.com/web-infra-dev/garfish): 一站式微前端解决方案。
 - 🦆 [Reduck](https://github.com/web-infra-dev/reduck): 基于 Redux 的状态管理库。
 
+## Benchmark
+
+我们通过 [Modern.js Benchmark](https://web-infra-dev.github.io/modern-js-benchmark/) 来观测核心指标的变化情况，比如 bundle size、compile speed 和 install size。
+
 ## 参与贡献
 
 > 欢迎参与 Modern.js 贡献！

packages/document/main-doc/docs/en/components/ua-polyfill.mdx

@@ -0,0 +1,40 @@
+
+### Polyfill At Runtime
+
+Modern.js also provides a runtime Polyfill solution based on browser [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) information, which has the following advantages over Babel:
+
+- It will not be inserted into the code, reducing the code .
+- The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
+
+exec `pnpm run new` to enable this features:
+
+```bash
+? Action Enable features
+? Enable features Enable UA-based Polyfill Feature
+```
+
+After executing the command, register the Polyfill plugin in `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
+export default defineConfig({
+  plugins: [..., polyfillPlugin()],
+});
+```
+
+After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML product contains the following script:
+
+```js
+<script src="/__polyfill__" crossorigin></script>
+```
+
+Visit the page `http://localhost:8080/__polyfill__` on Chrome 51 to see:
+
+![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
+
+:::caution
+This feature only works when using Modern.js built-in Web Server.
+
+If you need to customize the HTML template, please refer to [HTML Template](/guides/basic-features/html.html). Manually modifying the template through html.template / tools.html will cause this feature not work.
+:::

packages/document/main-doc/docs/en/guides/advanced-features/compatibility.mdx

@@ -56,42 +56,6 @@ For case where Polyfill is not required for third-party dependencies, you can se
 
 :::
 
-### Polyfill At Runtime
+import UAPolyfill from '@site-docs-en/components/ua-polyfill';
 
-Modern.js also provides a runtime Polyfill solution based on browser [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) information, which has the following advantages over Babel:
-
-- It will not be inserted into the code, reducing the code .
-- The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
-
-exec `pnpm run new` to enable this features:
-
-```bash
-? Action Enable features
-? Enable features Enable UA-based Polyfill Feature
-```
-
-After executing the command, register the Polyfill plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import polyfillPlugin from '@modern-js/plugin-polyfill';
-
-export default defineConfig({
-  plugins: [..., polyfillPlugin()],
-});
-```
-
-After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML product contains the following script:
-
-```js
-<script src="/__polyfill__" crossorigin></script>
-```
-
-Visit the page `http://localhost:8080/__polyfill__` on Chrome 51 to see:
-
-![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
-
-:::caution
-This feature only works when using Modern.js built-in Web Server.
-
-If you need to customize the HTML template, please refer to [HTML Template](/guides/basic-features/html.html). Manually modifying the template through html.template / tools.html will cause this feature not work.
-:::
+<UAPolyfill />

packages/document/main-doc/docs/zh/components/ua-polyfill.mdx

@@ -0,0 +1,39 @@
+### 运行时按需 Polyfill
+
+Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
+
+- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
+- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
+
+可以通过微生成器开启该功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「基于 UA 的 Polyfill」功能
+```
+
+执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
+
+```ts title="modern.config.ts"
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
+export default defineConfig({
+  plugins: [..., polyfillPlugin()],
+});
+```
+
+配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run serve` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
+
+```js
+<script src="/__polyfill__" crossorigin></script>
+```
+
+在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
+
+![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
+
+:::caution 注意
+该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
+
+如果有自定义模版的需求，请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时，可能会导致该功能无法正确生效。
+:::

packages/document/main-doc/docs/zh/guides/advanced-features/compatibility.mdx

@@ -35,42 +35,6 @@ Modern.js 在编译时默认通过 [core-js](https://github.com/zloirock/core-js
 
 :::
 
-### 运行时按需 Polyfill
+import UAPolyfill from '@site-docs/components/ua-polyfill';
 
-Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
-
-- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
-- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
-
-可以通过微生成器开启该功能：
-
-```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「基于 UA 的 Polyfill」功能
-```
-
-执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
-
-```ts title="modern.config.ts"
-import polyfillPlugin from '@modern-js/plugin-polyfill';
-
-export default defineConfig({
-  plugins: [..., polyfillPlugin()],
-});
-```
-
-配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run serve` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
-
-```js
-<script src="/__polyfill__" crossorigin></script>
-```
-
-在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
-
-![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
-
-:::caution 注意
-该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
-
-如果有自定义模版的需求，请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时，可能会导致该功能无法正确生效。
-:::
+<UAPolyfill />