前段时间的某一天晚上 1 点左右，我突然被小伙伴的电话叫醒，被告知线上有个问题帮忙看一下，然后排查了一下是有部分功能有问题，需要 回退部分功能，也就意味着要重新编译打新的镜像，然后我操作完之后重新打 tag 以触发 ci/cd 的部署流程，结果就是，等啊等啊等啊等，在 npm run build 之后大概等了 15 分钟左右，才执行完，这种速度显然是不可接受的，必须找时间解决一下老项目优的构建问题。
由于现有项目用的是 webpack4 ，已经落后与 web 生态的技术栈，所以也就没有优化的必要，直接升级或者换掉是正确的选择，在前端生态不停蜕变的道路上，拥抱变化 才是最明智的。
一开始想尝试用 webpack5 的增量编译来解决现在编译慢的问题，编译慢还是编译的文件太多了，改动什么才编译什么，相当于复杂度从O(n) 降到 O(1)，但增量编译如和做到在打 docker 镜像时还能正常使用的，docker 构建镜像时会根据 dockerfile 中的每条命令生成一个新的镜像，而在打 docker 镜像时，属于 无状态 行为，它怎么知道你的文件有改动呢，文件改动又属于 git 行为，就算能实现实现的复杂度和要踩的坑可能会更多，而且相关的文章比较少，最终还是放弃了 webpack5 选择了 vite。
webpack 项目转换成 vitestylus 文件以 css module 来处理
vite 中只有将 css 文件后缀加上 xx.module.styl 才会将其处理为 css modulevite 中不支持 stylus 内使用别名，改为相对路径process.env... 改为 import.meta.env...require 语法引入 js 包的改为 importwebpack 动态引入 import(’../’ + var) 重构 vite 中 import.meta.glob 语法实现一些诡异的问题：
重构完后 mobx 的值无法正常的响应，将 mobx 升级 6+，重构部分语法，并 observer 声明根组件
运行在测试环境时点击到某些页面直接崩溃，控制台报 Uncaught TypeError: Failed to fetch dynamically imported module
这个问题在开发时没有出现，因为在报错信息上完全看不出来到底是哪里出现了问题，最后无奈采用了二分注释大法，每一次注释掉一部分代码都需要重新编译在运行，直到最后确认出一个名为 ad-xxx.ts 的文件，改了名字比如 bd-xxx.ts 或者 cad-xxx.ts 都可以正常运行，我整个人当场懵逼，最后得知是因为我的浏览器安装了 ad-block 插件，这个而这个 命名会触发插件的拦截规则 误认为是广告文件，从而在运行时加载该文件失败则会出现上述报错，把插件关掉就正常了，之前我也遇到过类似的问题是在网页的轮播图上，但这次排查了半天硬是没想到是插件的问题，哎，大意了，各类插件不讲武德，偷袭我这个不到 35 岁的年轻同志。