utquidem
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
68 lines (45 loc) • 2.56 kB
Markdown
title: 客户端兼容性
前两个小节我们学习了如何使用 ES6+ 与 TypeScript 语法来编写应用。
这一小节，我们来学习如何在 Modern.js 中解决客户端兼容性的问题。
在实际项目中，往往会因为需要兼容老版本浏览器，而无法利用现代浏览器的最新特性与最佳实践。
Modern.js 提供了开箱即用的解决客户端兼容性的能力，支持自动 Polyfill、Browserlist 配置、差异化分发。
我们首先使用微生成器开启该功能：
```bash
? 请选择你想要的操作：启用可选功能
? 启用可选功能：启用「基于 UA 的 Polyfill」功能
```
接着我们修改 `modern.config.js`，添加以下配置：
```js title="modern.config.js"
export default defineConfig({
output: {
polyfill: 'ua',
},
});
```
以上配置将会开启「 自动 Polyfill 」，Modern.js 会根据浏览器对规范的支持程度，返回不同内容的 polyfill，我们不需要再担心低版本浏览器对新版本浏览器的拖累。
执行 `pnpm run dev`，可以看到浏览器中请求了当前服务上 `/__polyfill__` 这一资源，但是当前请求到的资源是空的：
我们切换到 Chrome Mobile 模式，选择设备为 iPhome 5/SE，重新刷新页面，可以看到请求到了有内容的资源：
:::info 注
如果遇到无法识别的浏览器，Modern.js 将会返回全量的 polyfill。
:::
接下里我们继续修改 `modern.config.js`：
```js title="modern.config.js"
export default defineConfig({
output: {
enableModernMode: true,
polyfill: 'ua',
},
});
```
以上配置将会开启「 差异化分发 」，在原生支持模块功能的浏览器中，Modern.js 优先使用带有 ESM 模块语法静态资源的 HTML，浏览器能够最优化的加载模块，带来更好的页面性能。
执行 `pnpm run build && pnpm run start`，打开页面，可以看到已经加载了带有 `-es6` 后缀的资源文件：
:::info 注
更多相关内容可以查看 [**客户端兼容性**](/docs/guides/usages/basic-configuration/compatibility)。
:::
> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern-3)。