前言前段时间，深夜1点左右，突然被朋友的电话吵醒，被告知在线有问题。功能有问题，需要回滚部分功能，即重新编译创建新镜像，运行后重新打标签，触发ci/cd的部署过程。结果是，等等，等等，等等，等，npmrunbuild之后，大约15分钟才执行完毕。这种速度显然是无法接受的。我们必须抽空解决旧工程的建设问题。项目背景技术栈：React+react-app-rewired(webpack4)+mobx+stylus...项目特点：独立的系统功能模块较多，更适合增量编译研究。由于现有项目使用的是webpack4，已经落后于web生态的技术栈，没有优化的必要。直接升级或更换是正确的选择。在前端生态不断转型的道路上，拥抱变化才是最明智的。一开始想尝试使用webpack5的增量编译来解决编译慢的问题。编译速度慢或编译文件过多。改的就是编译的，相当于把复杂度从O(n)降到了O(1)。但是在构建docker镜像时增量编译还是可以正常使用的。在构建docker镜像时，docker会根据dockerfile中的每条命令生成一个新的镜像。在构建docker镜像时，它是一种无状态行为。你怎么知道你的文件已经改变了？文件更改属于git行为。就算能实现，可能踩的复杂度和坑比较多，相关的文章也比较少。最后放弃了webpack5，选择了vite。使用vite重构使用https://github.com/tnfe/wp2vite将webpack项目转为vite安装https://github.com/thundernet...插件会将项目中的stylus文件处理为css模块默认情况下在vite中只有在css文件后缀加上xx.module.styl才会被处理为cssmodulevite不支持在stylus中使用别名，将系统变量从process.env...改成import.meta。env...改项目中使用require语法导入的js包。动态导入webpackintoimport('../'+var)重构vite中的import.meta.glob语法实现一些奇怪的问题：重构之后，mobx的值无法正常响应。将mobx升级到6+，重构部分语法，声明observer根组件在测试环境运行。直接点击某些页面就闪退，控制台报UncaughtTypeError:Failedtofetchdynamicallyimportedmodule这个问题在开发的时候并没有出现，因为在报错信息中根本看不出问题出在哪里。最终，他只好采用二进制注释的方式。每次注释掉一部分代码，都需要重新编译运行，直到最终确认。名为ad-xxx.ts的文件改名为bd-xxx.ts或cad-xxx.ts后可以正常运行。block插件，这个名字会触发插件的拦截规则，将其误认为是广告文件，所以如果该文件在运行时加载失败，就会出现上述错误。关闭插件是正常的。我以前遇到过类似的问题。在网页的轮播图上，这次找了半天，没想到是插件的问题。嘿，我不小心。重构完成后，开发开始构建生产包热更新~重构前10秒到9分钟体验差（估计和之前的配置有关）~重构前1.5秒到4分钟silkyvite真香，尤其是大牛批！
