关于javascript:使用-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. 应用 https://github.com/tnfe/wp2vite 进行 webpack 我的项目转换成 vite

2. 装置 https://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 岁的年老同志。

重构后

vite 真香，尤大牛批！