搭建动态Polyfill服务

目录:前端开发  |  发表于:2024-01-14 20:35:00

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

起因

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

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

搭建思路

原作者的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-cliviceroy这两个命令行工具,都可以在Github找到,一个是Go写的,一个是Rust写的,不过都有预编译版本,我们直接下载就好,下载完差不多就能本地运行了,执行下面两条命令启动服务。

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

成功!本以为到这里就差不多了,却没想到接下来才是坑。为了把这个工程扔到服务器上,我打了一个Docker镜像,镜像里装了NodeJS18,fastly-cliviceroy的二进制可执行文件是直接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-cliviceroy换成了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架构,则可能出现问题,我就卡在了这里没有搭建成功。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap