搭建动态Polyfill服务

当遇到浏览器兼容性问题时，可能需要用到Polyfill库，然而直接引入Polyfill库会让构建的产物变大，这拖慢了页面打开速度，牺牲了大部分用户的体验，一种比较好的方式是使用动态Polyfill服务。

起因

最近的一个前端项目中，用户反馈有浏览器兼容性问题，页面在一个低版本的Android浏览器（Webview）上无法显示。我个人是非常讨厌解决这类问题的，用户怎么就不能升级下系统呢，但问题总归还是得修复，最后考虑需要引入Polyfill来解决这个问题。然而直接引入Polyfill库会让构建的产物变大，这拖慢了页面打开速度，牺牲了大部分用户的体验，后来又发现还可以使用动态Polyfill服务：http://polyfill.alicdn.com/v3/polyfill.min.js，它可以根据浏览器的User-Agent自动返回合适的Polyfill代码，服务端代码是开源的，于是打算自己搭建一个。

结论：搭建成功了但也没完全成功，最后还是用了阿里搭建的https://polyfill.alicdn.com/v3/polyfill.min.js。

2024-6-25：动态Polyfill服务原官方域名polyfill.io被灰产团伙收购，数十万网站遭受了供应链攻击的影响，特定User-Agent下会导致页面跳转到非法网站，如通过原官方域名引入，应尽快切换到自建或阿里的Polyfill服务。

搭建思路

原作者的Github仓库：https://github.com/JakeChampion/polyfill-service

简单看了下工程，发现竟然是Rust写的，还好我的电脑上已经装了Rust环境，于是拉下来工程研究了一番。

这个工程虽然是用Rust编写的，但产物是WASM，另外我还注意到代码中引用了一些“fastly”相关的包，这究竟是啥东西？Google了一番之后大致弄明白了，这个“Fastly”是一个美国的CDN厂商，还提供Serverless平台，总而言之就是个业务和Cloudflare差不多的公司，估计国外用的人也不是那么多，之前还真没听说过。polyfill-service这个工程也是针对部署到Fastly的Serverless平台开发的，想在自己的主机或容器环境上搭建可没那么容易。

后来查阅了Fastly的文档，这个公司还提供了两个命令行工具，fastly-cli用于构建、运行和部署Fastly Serverless工程，viceroy用于在本地模拟Fastly平台的环境，通常用于本地开发环境调试代码，于是打算尝试把这些工具打包到Docker镜像里，扔到自己的服务器上模拟Fastly的环境运行。

具体搭建过程

实际上，我最终用的是这个代码库：https://github.com/jakeChampion/polyfill-service-self-hosted/

为了构建镜像，首先要下载fastly-cli和viceroy这两个命令行工具，都可以在Github找到，一个是Go写的，一个是Rust写的，不过都有预编译版本，我们直接下载就好，下载完差不多就能本地运行了，执行下面两条命令启动服务。

npm install
fastly compute serve --viceroy-path C:\Users\HUAWEI\sdk\viceroy\viceroy.exe

成功！本以为到这里就差不多了，却没想到接下来才是坑。为了把这个工程扔到服务器上，我打了一个Docker镜像，镜像里装了NodeJS18，fastly-cli和viceroy的二进制可执行文件是直接COPY进去的。

FROM ubuntu:20.04
COPY . /opt/polyfill-service/
RUN export DEBIAN_FRONTEND=noninteractive && \
    rm /etc/apt/sources.list && \
    echo "deb http://mirrors.ustc.edu.cn/ubuntu/ focal main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb http://mirrors.ustc.edu.cn/ubuntu/ focal-security main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb http://mirrors.ustc.edu.cn/ubuntu/ focal-updates main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb http://mirrors.ustc.edu.cn/ubuntu/ focal-backports main restricted universe multiverse" >> /etc/apt/sources.list && \
    apt-get update && \
    apt-get install /opt/polyfill-service/fastly/fastly_10.7.0_linux_amd64.deb && \
    bash /opt/polyfill-service/fastly/node_source.sh && \
    apt-get install -y nodejs && \
    npm config set registry https://registry.npmmirror.com && \
    cd /opt/polyfill-service/ && \
    npm install
WORKDIR /opt/polyfill-service/
CMD ["fastly", "compute", "serve", "--viceroy-path", "/opt/polyfill-service/fastly/viceroy", "--addr=0.0.0.0:7676"]

构建镜像：

 docker build -t polyfill-service:1.0 .

运行：

docker run -p 7676:7676 --name polyfill-service -d polyfill-service:1.0

本地测试了一下镜像，成功运行，也没有问题！

于是我开始往服务器上部署，由于服务器是aarch64的，于是我把工程中COPY的fastly-cli和viceroy换成了ARM64版，Github上也提供了ARM64的预编译版本。重新构建镜像，本地构建了好长一阵时间（本地是x86，构建aarch64镜像底层是用qemu模拟的），却发现不能运行了！

估计还是viceroy这个运行时在aarch64上有bug，研究了半天也没解决，对于这个冷门平台解决这个无聊的问题我也没有心情再研究下去了，至此放弃了自己搭建polyfill-service，改为使用阿里搭建的https://polyfill.alicdn.com/v3/polyfill.min.js。

总结

总的来说，通过实际搭建测试，polyfill-service在x86的Windows和Linux下运行都是没有问题的，可以实现自建polyfill-service服务，但如果服务器是aarch64架构，则可能出现问题，我就卡在了这里没有搭建成功。