likes
comments
collection
share

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

作者站长头像
站长
· 阅读数 34

前言

测试小伙伴们在集成测试中反馈了一个问题,Safari 12访问项目个别页面场景样式错乱了。我的第一直觉认为postcss那边处理出了问题,最后发现并不然,且听我道来!

问题背景

公司前端工程是基于webpack体系的,为什么会引入esbuild来处理css的部分压缩工作,主要是为了解决一个长期出现的疑难问题;内部样式注入页面的方式把有部分我们不要的东西打到标品了。而esbuild-loader介入到构建流程,就可以中途处理这些【压缩,去除sourcemap这些】!况且而且esbuild足够快,又能解决使用场景,何乐而不为!

目前暴露的一个问题就是会把css样式偏移量传统的写法,采用现代化的特性替换,比如inset取代上下左右的偏移量!!!!

环境信息

  • webpack : v4
  • esbuild : v0.14.1

Bug效果图

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

这个特性 Safari 14.1才正式支持,低版本浏览器的表现就是偏移量全部丢失了。

修正图

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

解决姿势

1. 排查postcss

为什么首先排查这个,因为工程就是借助postcss的一些能力来做样式处理流转的。那么想一想,最近最大的postcss改动是啥,就是引入了postcss-preset-env 来做动态降级【polyfill】

  1. 默认是读取工程的browserlist配置文件来识别要加载的插件
    • 以为这个没有读取到,手动设置
  2. 代码表现行为是shorthand【聚合多个属性简化写法】
    • 排查了autoprefixer

两者统一配置,截图如下 ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

  1. 排查是否启用了cssnano的简写特性

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

几次打包验证下来,都没有任何变化,那初步可以推断,并不是 postcss导致的;

2. 排查loader流转

除了less-loader,scss-loader这类之外的,最近有引入什么新的loader加入样式流转么?有的,引入了 esbuild-loader! 【用于解决祖传流转的疑难问题】

  1. 看了下esbuild-loader的readme和源码,只是包了一层,底层还是用的esbuild去做处理
  2. esbuild的文档和源码,压缩机制是他们内部实现的,只有一些相关参数的说明
  3. 快速验证法,把esbuildminify这个选项设置关闭了,看看表现形式【压缩后的产物源码】。

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

3. 修正:核心代码变更

ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

minify会启用esbuild所有的压缩插件,表现形式为不是我们要的【异常】, 而我对css只想去除sourcemap相关的 , 并且字符串初步压缩, 这里的改动就是只压缩空白,不压缩标识符这些! 【满足】

另外,官方的issue也有人遇到且反馈了,有兴趣可以看看~

结论

esbuild目前来说,可能对js的支持度比css会稍微好一些,但是处于js降级对于browserlist这类的完全兼容还在路上,css的降级处理更是薄弱!代码压缩实现也是esbuild工具链实现的!所以,我们涉及构建流程的变更【特别是引入新的工具的】,很大概率会引入兼容性问题,这时候需要覆盖兼容性范围测试,才能保证改动稳妥使用上!有不对之处请留言,谢谢阅读。

转载自:https://juejin.cn/post/7128021585960632333
评论
请登录