网络日志

[JS入门到进阶] 哎,被vite小坑了一波,大家记得配置build.cssTarget为'chro

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

1. 用Vite的爽点

之前,我用 《《 合 成 大 西 瓜 》 重 制 版 !( 联 机 版 在 做 了 )》。

以前用Webpack的难处

不得不说,用Vite作为构建工具,是真的方便啊!

以前每当启动一个项目,通常都会用Webpack初始化一下,然后手动配置自己所需的几个loader和plugin,搞好开发环境、编译脚本,才能开始业务代码的开发。

当然,这种操作做多了,开发者往往会封装自己专用的脚手架,只要copy一份以前项目的Webpack配置、或者运行个自己写的脚本,就能开始业务逻辑开发了。但这也挺麻烦的,并不是每个人都想得到。

Vite确实带来了诸多便利

现在,Vite就像是一个配置好的通用脚手架,内置了各种拿来即用的东西,不再需要开发者手动配Loader、Plugin了,确实方便!另外Vite带来的极速开发体验,大家也是常常夸赞,不必我不多说了。

所以,我开发《《 合 成 大 西 瓜 》 重 制 版 !( 联 机 版 在 做 了 )》时,因为想迅速做个MVP的单机版,就直接拿了Vite来使用,让我不再花精力在打包构建上,只需要全身心投入业务逻辑开发,非常爽!

2. 用Vite的不便之处

在带来诸多便利的同时,Vite也有一些点,让我有些难受:

开发和生产环境体验不统一

最明显的差异就是「样式」。我的css是在js中动态加载的。所以开发环境下:页面会先闪一下无样式的版本,等js、css下载好了,再展现有css的版本。

生产环境下表现不一样,因为编译后,css和js都放进了head标签,只有css加载完毕,才会展示body的内容。

内置很多工具和选项

Vite内部有一些既定的Loader、Plugin、编译选项,是对开发者不透明的,只有我们去仔细阅读文档,看到每一个配置参数,才知道它的细节。

这种内置了很多常用工具,对于小白来说是好事儿,不用关注那么多,能把所需的资源import和展示就OK。但是对于习惯Webpack的开发者就比较痛苦,他们希望弄懂每一个细节,从而达到理想的优化效果。尤其是看到编译产物不符合预期的时候,还要想方设法找到可以修改配置的地方,改成自己期望的配置。

3. 我被Vite坑的故事

我被Vite坑,是由以上2点共同导致的:开发和生产环境体验不统一、内置很多工具和选项。

我开发环境下,在本地PC端、移动端测试都是正常的,但是发布后,移动端样式有些兼容性问题,如下图:

正常的样式:

主要差异就在于左上角的「游戏列表」按钮,它其实是一个<a>标签,你知道它为什么不能是<button>标签吗?参考本专栏另一篇文章《用户体验好的 Button,在手机上不应该有 Hover 态》。

差异在于:color相关的css样式全都没有生效!

包括按钮的文字颜色、背景色、《一行简单的样式,让网页有「高级感」》。

4. 寻找解决方案过程

我怀疑是color相关的问题,看了一下编译产物,color全部变成这种格式了:#rrggbbaa,这种格式兼容性并不好。在我的华为浏览器上,无法正常展示。手机挺新的,如果我的手机无法正常展示,那么估计有至少20%左右的人,也无法正常展示。

但是这在开发环境下是正常的呀~我并没有提前发现问题,直接发布到线上了。太危险了!好在不是公司的业务,只是个人的小玩具。

看了编译产物,我才知道,开发环境下color没有被压缩,color还是跟你写的css是一致的。但是打包时,会把所有color变成#rrggbbaa格式,导致安卓webview无法识别。

我尝试去看Vite文档,搜索引擎搜索,得到第一个解决方案是设置build.minify=false。试了下,确实可行,但是这就不压缩代码了啊,肯定不是好的解决方案!

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [],
  build: {
    minify: false,
  },
});

随后尝试的第二个解决方案是build.minify使用terser,文档如下: https://vitejs.dev/config/#build-minify

实验后,未果,css color依然被压缩了。

随后我在Github搜索相关issue,找到了这个:

https://github.com/vitejs/vit...

原来是esbuild默认会把css都压缩下,顺便把color也简化了:

since vite 2.5.0,it use esbuild to minify css will cause this issue

终于得到了最好的方案,如下。

5. 解决方案

修改vite.config.ts,设置build.cssTargetchrome61即可:

import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [],
  build: {
    cssTarget: 'chrome61',
  },
});

真是被这个小问题坑哭了啊。

6. 建议

现在存在很多安卓webview不支持#rrggbbaa这种color,vite现在默认打包配置居然是将css里color压缩为#rrggbbaa格式。估计以后的版本会更新吧,已被标记为vite的p3-minor-bug了。

现在只能靠人工经验,把坑躲一躲了。C端产品慎用啊!如果要用,一定要针对打包产物做好完备的自动化测试啊!

7. 写在最后

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。