使用 vite 重构现有 Webpack 项目

date

Mar 19, 2022

slug

webpack-to-vite

status

Published

前言

前段时间的某一天晚上 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 重构

使用 ‣ 进行 webpack 项目转换成 vite

安装 ‣ 插件默认将项目中的 stylus 文件以 css module 来处理

在 vite 中只有将 css 文件后缀加上 xx.module.styl 才会将其处理为 css module

vite 中不支持 stylus 内使用别名，改为相对路径

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

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

将 webpack 动态引入 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 岁的年轻同志。

重构后

vite 真香，尤大牛批！