Quasar中的前端代码转译

使用 Quasar 时,如何完成浏览器兼容性的配置。

制定兼容范围

在进行实际配置前,首先必须确定要支持浏览器的版本,而确定浏览器版本则需要先明确业务对象的情况。

为什么不干脆把标准定的越高越好呢?比如支持100%的用户。这是因为支持率越高,可用的新语法越少,意味着更多的转译代码和 polyfill,这会带来额外的代码量,从而导致下载数据量增加,以及运行速度变慢的问题,为了0.01%影响99.99%用户的体验并增加他们的流量开销,是否合适呢?这就需要根据实际业务进行取舍和平衡。

比如我们的业务对象既有企业用户,也有公众用户,企业用户主要使用钉钉,并可对其PC浏览器进行要求,而公众用户主要使用微信。

确定常用浏览器版本

PC浏览器可以指定,那么对浏览器版本就不需要过多考虑,但是部分客户还有XP系统,那么也就确定了 Chrome 浏览内核的版本不可以超过 49;

微信用户可能在手机登录,也可能在PC登录,而PC中的微信内置是QQ浏览器9,其内核版本是 Chrome 53;

电脑端的钉钉内置浏览器已经是 Chrome 91;

手机端的话考虑到安卓手机使用寿命比苹果要短,且微信和钉钉都可以内置新版本的引擎,而苹果手机必须使用系统自带的 Safari 浏览器内核,因此手机端的版本以支持 Safari 为目标,目前苹果官方支持的最老的设备是2015年发布的 iPhone 6s,如果用户从来没有升级过系统,那么自带的就是 Safari 9;

因此主要的浏览器版本支持就是 Chrome 49 与 Safari 9。

通过 browserslist 完成浏览器版本配置

在 package.json 中添加 browserslist,保持其他配置为默认值,修改 Chrome 和 ios_saf 的版本:

"browserslist": [
  "ie 11",
  "Chrome >= 43",
  "ios_saf >= 9",
  "last 10 Firefox versions",
  "last 4 Edge versions",
  "last 7 Safari versions",
  "last 8 Android versions",
  "last 8 ChromeAndroid versions",
  "last 8 FirefoxAndroid versions",
  "last 10 iOS versions",
  "last 5 Opera versions"
],

处理第三方库

采用上述配置会使 Quasar 在转译时调用 babel ,并根据指定的目标浏览器转换用户编写的代码,使其能在上述浏览器中运行。但是对于通过 npm install 安装的第三方库,并不会进行转译。比如函数式编程工具库 rambda 会用到 Object.values 这个方法,但 Chrome 49 并不支持这个方法,不对其进行处理就会报找不到方法的运行时错误。

处理方式也很简单,通过 quasar.conf.js 的配置告诉 babel 哪些第三方库需要被转译即可。 将 build 中的 transpile 设为 true,并在 transpileDependencies 中添加 rambda 选项。

build: {
  ...
  transpile: true,
  transpileDependencies: ['rambda'],
  ...
}

持续改进

完成上面的配置,可以初步估算我们的程序至少可以支持99.5%以上的用户。根据 caniuse.com 中的统计,国内大约还有 0.1% 的用户在使用 iOS 9 之前的版本以及 0.36% 的用户在使用 Android 5 之前的版本,但考虑到我们的程序未必一定使用了某些不被支持的特性,以及微信和钉钉自带浏览器也会采用比原始系统更新的内核,所以实际的支持率可以更乐观一些。

回到实际生产环境,上述都是理论推断,最终还是需要以实际情况为准。

比如 iOS 9 理论上支持 const 但不能在 use strict 模式中使用,这会导致 babel 7 编译的代码无法在早期的 iPhone 中使用,最终我们通过添加 ios_saf >= 8 将版本进一步降低才解决了这个问题。这类问题都是在实际使用过程中才能发现的,因此需要不断的根据现实反馈才能正确支持目标用户,并控制好生成出来的最终代码量。

而随着时间推移,旧手机的用户比例会进一步降低,到时候又可以将支持的浏览器版本往前推移,使编译结果能使用更多新语法,从而提升大多数用户的体验。

常用工具