项目升级

这篇文档类似于报告或总结，对我曾着手的项目进行了一些优化。

原因

项目冷启动速度太慢了，一手 pnpm run 白屏了一分多钟。

库与依赖的处理

使用 pnpm why 分析依赖，并在 vscode 中全局搜索依赖，如果确实没有用，再移除

大概移除了 20 个依赖左右。这里对于所有的依赖，没有选择去更新，因为现在更新这些依赖是没有必要的，它们和 vue/vite 没有关系，升级 vue/vite 也不会影响它们的使用。

整理目录结构，把没用的依赖配置文件给优化掉，该删的删。

规定项目 node 版本：

在 package.json 中添加如下字段：

json

  "engines": {
    "node": ">=16.0.0",
    "pnpm": ">=8.0.0"
  },

这里的 engines 字段最大的作用不是告诉 npm 当前项目的运行的 node 环境是怎样的，而是告诉人这个信息。有很多项目都不喜欢加这个字段，导致别人克隆下来之后因为 node 版本找不对而不能跑。这里的第二行 pnpm 并不属于官方定义的字段，而是自己加的，类似于注释，这样做更加语义化。由于没有进行过测试具体的兼容性，所以这里就先用了 >=。

增加字段防止误执行 npm 破坏依赖：

json

"scripts": {
    "preinstall": "npx only-allow pnpm"
}

vite 更新

bash

npm uni vite
npm i vite

vite/vue 是属于代码环境、框架的概念，为我们提供一个写代码的环境，所以它们的变化不会和现有的底层 js 依赖相冲突。我们的 /src 下的代码，都只是在借用 vite/vue 提供的环境在做事，我们只需要关注环境提供的哪些能力发生了变化：

语法解析：
- esm：由于我们的项目本来就是 esm 项目，所以 vite 本来就支持的很好，不需要考虑 cjs 的解析问题，这也是我感觉咱们的项目能够比较不曲折的升级到新版本的很重要的一个原因；
- ts 的语法解析可以考虑升级，tsconfig.json 的配置抄一下最新的，并把 typescript 更到最新。
- less，jsx 的解析，官方文档的迁移手册中没有提到他们，表明他们是不需要动的，但这里我还是先把 less 给升级到了最新。
- 静态文件的引入和解析，在 vite 版本变动中均为增强功能，没有破坏性变化。
vite 的插件，他们依赖 vite：
先把用到的插件都了解了一遍，把不影响运行的插件先拔掉，跑起来项目
vite 提供的 api，我们的项目中没有用到，所以不用考虑

全局变量：我们项目中只使用到 import.mata ，这里不需要修改，没有发生变动；

这样，项目就能跑起来了：

bash

pnpm dev:https

处理插件/更新依赖

一个个的拔插更新 vite 插件，重启项目，由于是一个个的拔插每个插件，报错也很容易解决，针对这个插件就行了。

依赖更新，做的比较少。这是一个体力活：

把依赖卸载重装最新版本，然后把项目跑起来，在 vsc 中全局搜索某个依赖，看它在哪个页面用到，点过去，然后看有没有异常....如此反复

这些现在在用的依赖，一个个的更新也不是不行，但是费力不讨好。这个放在后面。

对于比较特殊的依赖（比如对等依赖），默认 npm 等包管理器不进行清理，需要手动 npm prune。所以项目在清理完依赖后还需要手动 pnpm prune 一下，或者把 node_modules 删掉，重新 pnpm i 一下。

最后，可以使用 pnpm outdated 来进行依赖项的汇总，并查看每个依赖，它们是否有必要升级：

重新组织代码目录结构

到这里，项目的环境就已经基本上清理干净了。

删除不必要的文件，合并多个冗余配置文件，尽可能把同类文件归到同一目录中
解决 vscode 爆红：项目能跑，但是报红，tsconfig 和 eslint 代码检查的锅。（这里需要注意的是自己的 vscode 的 ts 和 eslint 的配置，建议配置为使用工作区的 typescript，建议禁用工作区 prettier 等代码检查工具而仅启用 eslint。）

升级前后对比

在升级前，冷启动的首屏渲染需要 130 秒：

alt text

可以看到升级后的速度提升是很可观的，冷启动首屏渲染的时间来到了 10 秒内：

alt text

其他 & 总结

vue 也升级到了最新版本，可以使用一些新特性了，移除了弃用的语法
考虑了全局自动引入组件，最后经过讨论，认为声明直接使用全局引入要更加方便
代码体积压缩大小对比实验：三方组件库的全局引入和按需引入，并未对打包速度和打包后的体积有明显影响，并且按需引入会增加代码的书写负担（写之前有可能没引进来，需要去注册一下），相对来说不值得。

目前项目冷启动白屏时间平均在十秒左右。

下一步

ts 配置存在问题，这个是由 vue-official 插件由 bug 引起的，它还无法进行降级，并且 volar 被弃用。。暂时没有好的解决方案。
tsconfig 引入 @virtai 的配置
小的依赖库更新版本
大代码块分解；移除无用路由/组件
vue2 代码 / vue setup() 逐步干掉
路由切换性能优化：存在卡顿
考虑使用 vite 插件：devtools

项目升级 ​

原因 ​

库与依赖的处理 ​

vite 更新 ​

处理插件/更新依赖 ​

重新组织代码目录结构 ​

升级前后对比 ​

其他 & 总结 ​

下一步 ​