当前位置: 首页 > news >正文

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

我是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的内容。

1.gif

内置很多工具和选项

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

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

3. 我被Vite坑的故事

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

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

2.jpg

正常的样式:

3.png

主要差异就在于左上角的「游戏列表」按钮,它其实是一个<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/vite/issues/4650

原来是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 噢~我有空了会分享做游戏的相关技术。

相关文章:

  • 渗透测试-伪装隐藏与清理痕迹手段
  • imac起死回生,在2011年中的imac 27上安装windows10
  • 水果店圈子:第一次做水果店生意好做吗,冬天水果店生意好做吗
  • Python中inplace参数
  • 基于springboot的房屋租赁系统
  • map和sort 集合A-B
  • talcheck-looper(循环代码结构分析工具)
  • 项目经理的工作类型
  • sdut-Collection(Map)-1 读中国载人航天史,汇航天员数量,向航天员致敬
  • 【JVM笔记】加载与存储字节码指令
  • springboot社区再生资源上门回收平台毕业设计-附源码072049
  • React Router v6中的更新
  • xacro搭建ros仿真机器人(待更新)
  • Visual Studio C++ Hello World
  • 线程安全问题和多线程安全经典案例
  • 【技术性】Search知识
  • Angular6错误 Service: No provider for Renderer2
  • egg(89)--egg之redis的发布和订阅
  • E-HPC支持多队列管理和自动伸缩
  • ES6语法详解(一)
  • HTML-表单
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • js如何打印object对象
  • JS专题之继承
  • magento2项目上线注意事项
  • Redis 懒删除(lazy free)简史
  • sessionStorage和localStorage
  • Unix命令
  • vue-router 实现分析
  • Vue官网教程学习过程中值得记录的一些事情
  • Windows Containers 大冒险: 容器网络
  • 双管齐下,VMware的容器新战略
  • 项目实战-Api的解决方案
  • 正则学习笔记
  • # 飞书APP集成平台-数字化落地
  • (1)Android开发优化---------UI优化
  • (C#)一个最简单的链表类
  • (libusb) usb口自动刷新
  • (Matlab)遗传算法优化的BP神经网络实现回归预测
  • (ZT)出版业改革:该死的死,该生的生
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (二)hibernate配置管理
  • (一) springboot详细介绍
  • (转)memcache、redis缓存
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • .NET Core 中的路径问题
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .NET 材料检测系统崩溃分析
  • .net 简单实现MD5
  • .NET构架之我见
  • .NET项目中存在多个web.config文件时的加载顺序
  • @RequestBody与@ResponseBody的使用
  • [acm算法学习] 后缀数组SA
  • [AIGC codze] Kafka 的 rebalance 机制
  • [C#]科学计数法(scientific notation)显示为正常数字