搭建动态Polyfill服务

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

起因

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

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

搭建思路

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

简单看了下工程，注意到代码中引用了一些“fastly”相关的包，这究竟是啥东西？Google了一番之后大致弄明白了，这个“Fastly”是一个美国的云服务厂商，它提供了自己的Serverless平台可供开发者部署服务。polyfill-service这个工程也是针对部署到Fastly的Serverless平台开发的，想在自己的主机或容器环境上搭建可没那么容易。

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

具体搭建过程

首先要下载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进去的，这里注意要选择Linux操作系统和对应CPU架构的可执行文件。

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

本地测试了一下镜像，成功运行。

总结

总的来说，通过实际搭建测试，自建polyfill-service在Windows和Linux下运行都是没有问题的，可以实现自建polyfill-service服务。