Vite特性总结

vite的主要优势在于开发时启动速度会很快，这在文件数目众多的情况下优势尤其明显。在我写这篇文章的时候github上已经有30多个star了，版本为2.5.7。可见其热度。

快的原因主要在于它省去了bundle的过程，利用了现代浏览器支持ES模块的特性，开发服务器直接提供ES模块，而不是编译好的Bundle。当然由于浏览器还无法识别bare module，即通过import 'lodash'这种既不是相对路径又不是绝对路径的引入方式，因此vite内部会做路径转换。

特性

• 开发环境会很快

主要原因有：

1. 无需bundle，内置的dev server直接提供ES module。要求浏览器支持ES module。
2. 使用了esbuild进行预构建。esbuild用go写的，会比用JS写的打包工具上快10-100 倍。在预构建中，做了如下工作：(1) 将用CommonJS和UMD写的模块转成ES module；(2) 转换bare module路径；(3) 依赖合并为单个模块，减少HTTP请求；(4) 第三方包会在本地node_modules/.vite，除非依赖发生变化，才会重新进行预构建。因此后续冷启动会非常快。此外还会在浏览器中进行强缓存，因此页面刷新也会快。

总结：转换工作是在发生模块请求的时候才提供，即按需动态编译。

• 支持HMR。
• 生产环境使用Rollup进行打包，以便使用tree-shaking、懒加载和 chunk 分割等优化。
• 支持vue、React、Lit-element、svelte等框架及其对应的TS版本。
• 内部使用esbuild将TS转译为JS，但是不进行类型检查，可安装tsc、vue-tsc进行检查。
• index.html为项目的入口文件，会自动解析其中引入的JS和CSS，进行路径转换。支持多个.html，即多页应用。
• 得益于rollup，有丰富的插件支持。

环境要求

• Node version >= 12.0.0
• 浏览器支持<script type="module">和dynamic import: 传统的import是静态编译的。而import()是动态引入，返回一个promise，resolve模块暴露的内容。不支持的浏览器可引入@vitejs/plugin-legacy。

功能

路径解析

浏览器不支持引入ES裸模块，它解析不了，vite检测到这些裸模块会做如下工作：

• 使用esbuild将所有commonJS/UMD格式转为ES module（Vite 的开发服务器将所有代码视为原生 ES 模块）
• 进行预构建，提高==冷启动时间==。Vite会将预构建的依赖缓存到node_modules/.vite，在依赖发生变化时才会重新预构建。解析后的依赖请求会以HTTP头 max-age=31536000,immutable强缓存，以提高在开发时的页面重载性能。一旦被缓存，这些请求将永远不会再到达开发服务器。
• 将裸模块路径解析为浏览器能识别的路径(绝对or相对)。

关于CSS

• 支持css modules，以X.module.css命名的文件被默认为css modules。

• 由于Vite的目标仅为现代浏览器，因此建议使用原生CSS变量和实现CSSWG 草案的PostCSS插件（例如postcss-nesting）来编写简单的、符合未来标准的CSS。但是也支持scss这样的预处理器。

• Vite会自动地将一个异步chunk模块中使用到的CSS代码抽取出来并为其生成一个单独的文件。这个CSS文件将在该异步chunk加载完成时自动通过一个<link>标签载入，该异步chunk会保证只在CSS加载完毕后再执行.

静态资源

public目录中的资源可以直接通过/访问到，适合放一些不希望被构建的静态资源。public中的资源不应该被JavaScript文件引用。

区分环境

在变量import.meta.env中能获取到环境相关的内容，包括如下的内建变量：

• MODE

默认运行serve命令是development，build命令是production。当然还能添加更多环境例如staging。此时需添加.env.staging文件：

NODE_ENV=production
VITE_APP_TITLE=My App (staging)
复制代码

添加构建命令：

vite build --mode staging
复制代码

此时stage环境仍然按照production环境构建，但是也暴露了一些不同的变量。这些变量需以VITE_开头才会被注入以提供给客户端源码。这些变量可通过import.meta.env.XXX在客户端代码中被访问到。

关于更多区分环境，参阅：.env.[mode]文件。

• BASE_URL：如果你的前端资源被放到服务器的某个子目录下，可以在vite.config.js的base配置项中进行配置。
• PROD：布尔值。
• DEV：布尔值，与PROD相反。

参考

• Vite官方文档
• 采坑：2021年了，vite能投入生产了吗？vite.config.js配置踩坑
• 采坑：项目开发中到底能不能使用vite?
• 采坑：issues
• 实战：一个基于vue3+vite+ts的完整项目