关于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 真香，尤大牛批！