Vite构建框架概览

Vite作为Vue3主推构建框架，在性能上跟webpack有很大冲击，并且在开发圈占有的比重越来越大。文档说得很详细，今天只是针对前端面试常问到的内容做一个筛选总结，也方便不熟悉的同学快速了解。

一、优势

或者说为什么选择了Vite，在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

这种处理有个弊端，就是项目越大，处理的文件越多，速度就越慢，Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

Vite 以原生 ESM 方式提供源码。所以它真正实现的是：让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

既然有优势，下面就来细说一下Vite哪些功能造就了它的优势。

二、功能

1、npm依赖解析和预构建

import { someMethod } from 'my-dep'

原生 ES 导入不支持，但是ViteVite 将会检测到所有被加载的源文件中的此类裸模块导入，并执行以下操作：

预构建它们可以提高页面加载速度，并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由 esbuild 执行，这使得 Vite 的冷启动时间比任何基于 JavaScript 的打包器都要快得多。
重写导入为合法的 URL，例如 /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd 以便浏览器能够正确导入它们。

2、模块热替换

Vite 提供了一套原生 ESM 的 HMR API。具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。

3、其他

Vite天然支持引入.ts文件；
插件支持Vue，单文件支持有@vitejs/plugin-vue，JSX文件有@vitejs/plugin-vue-jsx；
css支持import引入以及对.scss、.less等内置支持，不需要特地去安装什么插件；
支持静态资源引入，像img、js文件等；
支持JSON引入；
Glob导入
动态导入

还有很多Vite支持的功能，这里就不在展开说了。下面来说下它的使用吧。

三、使用

1、插件

在vite.config.js中配置

import vitePlugin from 'vite-plugin-feature' 
import rollupPlugin from 'rollup-plugin-feature' 
export default defineConfig({ 
    plugins: [vitePlugin(), rollupPlugin()], 
})

2、配置

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量，那么你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想为我们假设的 prev 模式构建应用：

vite build --mode prev

注意：不管是哪个环境，它都会先加载.env，然后合并对应的 .env.prev配置。

这样就可以通过配置文件来区分环境了，怎么用呢：

// .env.prev文件，一定要在根目录
VITE_GLOB_API_URL=https://your.domain.com

// 在普通文件里，通过import.meta.env拿到变量
const {VITE_GLOB_API_URL} = import.meta.env;

const host = VITE_GLOB_API_URL + '/api';

export default host;

四、Vite VS webpack

1、使用简单，开箱即用

相比Webpack需要对entry、loader、plugin等进行诸多配置，Vite的使用可谓是相当简单了。

只需执行初始化命令，就可以得到一个预设好的开发环境，开箱即获得一堆功能，包括：CSS预处理、html预处理、异步加载、分包、压缩、HMR等。

他使用复杂度介于Parcel和Webpack的中间，只是暴露了极少数的配置项和plugin接口，既不会像Parcel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态，灵活适中、复杂度适中。

2、开发环境和速度提升

image.png
针对开发环境中的启动慢问题：

Vite开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时还会使用 esbuild 来进行预构建。
而 Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。

针对HMR慢：

即使只有很小的改动，Webpack依然需要构建完整的模块依赖图，并根据依赖图来进行转换。
而Vite利用了ESM和浏览器缓存技术，更新速度与项目复杂度无关。
可以看到，如Snowpack、Vite这类面相非打包的构建工具，在开发环境启动时只需要启动两个Server，一个用于页面加载，一个用于HMR的Websocket。
当浏览器发出原生的ESM请求，Server收到请求只需要编译当前文件后返回给浏览器，不需要管理依赖。