使用 vite 重构现有 Webpack 项目

前言

前段时间的某一天晚上 1 点左右,我突然被小伙伴的电话叫醒,被告知线上有个问题帮忙看一下,然后排查了一下是有部分功能有问题,需要 回退部分功能,也就意味着要重新编译打新的镜像,然后我操作完之后重新打 tag 以触发 ci/cd 的部署流程,结果就是,等啊等啊等啊等,在 npm run build 之后大概等了 15 分钟左右,才执行完,这种速度显然是不可接受的,必须找时间解决一下老项目优的构建问题。

项目背景

  • 技术栈:React + react-app-rewired(webpack4) + mobx + stylus…
  • 项目特点:各个独立的系统功能模块众多,比较适合增量编译

调研

由于现有项目用的是 webpack4 ,已经落后与 web 生态的技术栈,所以也就没有优化的必要,直接升级或者换掉是正确的选择,在前端生态不停蜕变的道路上,拥抱变化 才是最明智的。

一开始想尝试用 webpack5 的增量编译来解决现在编译慢的问题,编译慢还是编译的文件太多了,改动什么才编译什么,相当于复杂度从O(n) 降到 O(1),但增量编译如和做到在打 docker 镜像时还能正常使用的,docker 构建镜像时会根据 dockerfile 中的每条命令生成一个新的镜像,而在打 docker 镜像时,属于 无状态 行为,它怎么知道你的文件有改动呢,文件改动又属于 git 行为,就算能实现实现的复杂度和要踩的坑可能会更多,而且相关的文章比较少,最终还是放弃了 webpack5 选择了 vite。

使用 vite 重构

  1. 使用 github.com/tnfe/wp2vit… 进行 webpack 项目转换成 vite

  2. 安装 github.com/thundernet.… 插件默认将项目中的 stylus 文件以 css module 来处理

    1. 在 vite 中只有将 css 文件后缀加上 xx.module.styl 才会将其处理为 css module
  3. vite 中不支持 stylus 内使用别名,改为相对路径

  4. 将系统量变由 process.env... 改为 import.meta.env...

  5. 将项目中有使用 require 语法引入 js 包的改为 import

  6. 将 webpack 动态引入 import(’../’ + var) 重构 vite 中 import.meta.glob 语法实现

一些诡异的问题:

  1. 重构完后 mobx 的值无法正常的响应,将 mobx 升级 6+,重构部分语法,并 observer 声明根组件

  2. 运行在测试环境时点击到某些页面直接崩溃,控制台报 Uncaught TypeError: Failed to fetch dynamically imported module

    这个问题在开发时没有出现,因为在报错信息上完全看不出来到底是哪里出现了问题,最后无奈采用了二分注释大法,每一次注释掉一部分代码都需要重新编译在运行,直到最后确认出一个名为 ad-xxx.ts 的文件,改了名字比如 bd-xxx.ts 或者 cad-xxx.ts 都可以正常运行,我整个人当场懵逼,最后得知是因为我的浏览器安装了 ad-block 插件,这个而这个 命名会触发插件的拦截规则 误认为是广告文件,从而在运行时加载该文件失败则会出现上述报错,把插件关掉就正常了,之前我也遇到过类似的问题是在网页的轮播图上,但这次排查了半天硬是没想到是插件的问题,哎,大意了,各类插件不讲武德,偷袭我这个不到 35 岁的年轻同志。

重构后

开发启动 构建生产包 热更新
重构前 ~10秒钟 ~9分钟 体验差劲(可能是跟之前配置有关)
重构前 ~1.5秒钟 ~4分钟 体验丝滑

vite 真香,尤大牛批!

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享