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

前言

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

问题背景

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

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

环境信息

• webpack : v4
• esbuild : v0.14.1

Bug效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

修正图

image.png

解决姿势

1. 排查postcss

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

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

两者统一配置，截图如下

在这里插入图片描述

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

在这里插入图片描述

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

2. 排查loader流转

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

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

在这里插入图片描述

3. 修正：核心代码变更

在这里插入图片描述

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

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

• https://github.com/evanw/esbuild/issues/1925

结论

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