持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情。
这是我的专栏《极致用户体验》，适合产品、设计、前端阅读。产品/设计阅读后，知道怎么设计具有极致用户体验的交互。前端阅读后，知道怎么实现产品需求。如果你是产品经理，按照我专栏里内容设计了交互，前端却跟你说某特性实现不了，请把专栏里的文章甩给他！不客气！
1. 用Vite的爽点
之前，我用 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>标签吗？参考本专栏另一篇文章《你的 Link Button 能让用户选择新页面打开吗？》，也可以再延伸阅读一下这篇文章《如何自己实现一个 Button，它在PC端有常态、Hover态、Active态，在移动端没有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，文档如下: vitejs.dev/config/#bui…
实验后，未果，css color依然被压缩了。
随后我在Github搜索相关issue，找到了这个：
原来是esbuild默认会把css都压缩下，顺便把color也简化了：
since vite 2.5.0，it use esbuild to minify css will cause this issue
终于得到了最好的方案，如下。
5. 解决方案
修改vite.config.ts，设置build.cssTarget为chrome61即可：
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [],
build: {
cssTarget: 'chrome61',
},
});
复制代码真是被这个小问题坑哭了啊。
6. 建议
现在存在很多安卓webview不支持#rrgbbaa这种color，vite现在默认打包配置居然是将css里color压缩为#rrgbbaa格式。估计以后的版本会更新吧，已被标记为vite的p3-minor-bug了。
现在只能靠人工经验，把坑躲一躲了。C端产品慎用啊！如果要用，一定要针对打包产物做好完备的自动化测试啊！
7. 写在最后
我是HullQin，独立开发了联机桌游合集，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、UNO等游戏，绝不收费，绝无广告，点这就能开始玩。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。