### 运行时按需 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` 手动修改模版时，可能会导致该功能无法正确生效。
:::
