带你玩转 Vite + Vue3 高低版本常用玩法

一、首先来个 Vite 的通用简介

Vite 是一种新型前端构建工具，在我们保险前端项目中已经推动并应用很久了，Vite 能够显著降低构建时间，提升前端开发效率。

它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

Vite 还提供了强大的扩展性，可通过其 插件 API 和 JavaScript API 进行扩展，并提供完整的类型支持。

二、Vite 的优势，为什么使用 Vite ？

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，严重影响开发人员的效率。

当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务，如果项目很大，导致的一个必然结果就是，服务启动很慢，热更新很慢，效率降低。Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理，节省启动及更新时间。

如下图是新旧项目启动时长对比，Vite 启动速度，快了 30 多倍；

常规的通过 webpack 启动的服务，基于打包器启动，整个重新构建，即使将构建内容放到缓存中，更新速度也会随着应用体积增长而直线下降：

Vite 在原生 ESM 基础上执行 HMR，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新：

三、Vite 为我们开发提升了很大的效率，但是也会有一些小问题

1、使用 Vite + Vue3 +Element-plus 或者其他 UI 库，按需加载使用时，多人开发，每人页面重新 reload 了吗🤓？

2、低版本 Vite（2.9以下）配置 Preview 的 proxy 时，是不是不生效🤓？

3、低版本 Vite 配合 unocss 设置样式后，是不是热更新不生效🤓？

4、部分依赖包