Vite2.0的强大之处

Vite是什么？

Vite是一种全新的前端构建工具，你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。

Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。
Vite由两个主要部分组成：

• 一个通过本机 ES 模块提供源文件的开发服务器，具有丰富的内置特性和快得惊人的热模块替换(HMR)。
• 一个构建命令，它将代码与 Rollup 捆绑在一起，后者预先配置为输出用于生产的高度优化的静态资产。

除此之外，Vite 通过其插件 API 和 JavaScript API 具有高度的扩展性，并提供全面的类型支持。

为什么选Vite？

Vite 以 原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。

根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

对于应用使用 webpack，对于类库使用 Rollup

Webpack 和 Rollup 都可以使用 pkg.module 来尽可能构建出高效代码

Vite2.0新特性

多框架支持

Vite 一开始主要注重于 Vue 的单文件组件支持，但 2.0 基于之前的经验提供了一个更稳定灵活的内部架构，从而可以完全通过插件机制来支持任意框架。

现在 Vite 提供官方的 Vue, React, Preact, Lit Element 项目模版

全新插件机制和API

Vite 2.0 采用了基于 Rollup 插件 API 的设计。很多 Rollup 插件可以跟 Vite 直接兼容。插件可以在使用 Rollup 插件钩子之外使用一些额外的 Vite 特有的

API 来处理一些打包中不存在的需求，比如区分开发 vs 打包，或是自定义的热更新处理

基于esbuild的依赖预打包

由于 Vite 是一个基于原生 ESM 的开发服务器，在启动时我们需要通过依赖预打包来达成两个目的：1. 减少模块 / 请求数量；2. 支持 CommonJS 依赖

Vite 之前是使用 Rollup 来执行这个过程，在 2.0 中切换到了 esbuild，使这个过程加快了几十倍。冷启动一个之前需要将近 30 秒预打包的项目现在只需要不到两秒

更好的CSS支持

强化路径解析：CSS 中的 @import 和 url() 路径都通过 Vite 的路径解析器来解析，从而支持 alias 和 npm 依赖。

自动 URL 改写：所有 url() 路径都会被自动改写从而确保在开发和构建中都指向正确的文件路径。

CSS 代码分割：构建时每一个被分割的 JS 文件都会自动生成一个对应的 CSS 文件，并且两个文件会被自动并行按需加载。

Vite与Vue Cli的优劣

VIte的开发服务器比 Vue CLI 快 10-100 倍

Vue CLI 是构建在 Webpack 之上的，因此开发服务器和构建功能和性能都将是 Webpack 的超集。

Vite 也是一个提供基本项目脚手架和开发服务器的构建工具

Vite有自己的开发服务器，利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。

Vite 采用 Rollup 进行构建，速度也更快。

VIte如何做到开发构建/重新构建速度这么快？

Webpack 开发服务器架构

它通过解析应用程序中的每一个 import 和 require ，将整个应用程序构建成一个基于 JavaScript 的捆绑包，并在运行时转换文件（例如 Sass、TypeScript、SFC）。

这都是在服务器端完成的，依赖的数量和改变后构建/重新构建的时间之间有一个大致的线性关系。

它通过解析应用程序中的每一个 import 和 require ，将整个应用程序构建成一个基于 JavaScript 的捆绑包，并在运行时转换文件（例如 Sass、TypeScript、SFC）。

这都是在服务器端完成的，依赖的数量和改变后构建/重新构建的时间之间有一个大致的线性关系。

Vite 开发服务器架构

Vite 不捆绑应用服务器端。相反，它依赖于浏览器对 JavaScript 模块的原生支持（也就是 ES 模块，是一个比较新的功能）。

浏览器将在需要时通过 HTTP 请求任何 JS 模块，并在运行时进行处理。Vite 开发服务器将按需转换任何文件（如 Sass、TypeScript、SFC）。

这种架构避免了服务器端对整个应用的捆绑，并利用浏览器高效的模块处理，提供了一个明显更快的开发服务器。

Vite缺点

Vite依赖JavaScript模块，大多数现代 JS 包都提供了这一点，但一些老的包可能只提供 CommonJS 模块。

Vite 可以将 CommonJS 转换为 JavaSript 模块，但在一些边缘情况下它可能无法做到。并且它还需要支持 JavaScript 模块的浏览器。

与 Webpack/Vue CLI 不同，Vite 无法创建针对旧版浏览器、web components 等的捆绑包。

而且，与 Vue CLI 不同，开发服务器和构建工具是不同的系统，导致在生产与开发中可能出现不一致的行为。

Vue CLI VS Vite

• public 中的资源不应该被 JavaScript 文件引用。

环境变量与模式

Vite 使用 dotenv 在你的项目根目录下从以下文件加载额外的环境变量

加载的环境变量也会通过 import.meta.env 暴露给客户端源码

只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

模式

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

这意味着当执行 npm run build( vite build )时，它会自动加载 .env.production 中可能存在的环境变量

可以使用 import.meta.env.VITE_APP_TITLE 作为渲染标题 

一个典型的例子是，你可能希望有一个 “staging” 模式，它应该具有类似于生产的行为，但环境变量与生产环境略有不同。

vite build --mode staging

需要一个 .env.staging 文件

比较

Snowpack

Snowpack 也是一个与 Vite 十分类似的非构建式原生 ESM 开发服务器。除了不同的实现细节外，这两个项目在技术上比传统工具有很多共同优势。

Vite 的依赖预绑定也受到了 Snowpack v1（现在是 esinstall）的启发

区别

Vite 支持广泛的功能，构建过程也集成度更高，以下功能目前在 Snowpack 构建优化器中不可用：

• 多页面应用支持
• 库模式
• 自动分割 CSS 代码
• 预优化的异步 chunk 加载
• 自动动态导入 polyfill
   

更快的依赖预构建

Vite 使用 esbuild 而不是 Rollup 来进行依赖预构建。这为开发服务器冷启动和依赖项失活的重新构建方面带来了显著的性能改进。

Monorepo 支持

Vite 能够支持 monorepo，我们已经有用户成功地将 Vite 基于 monorepo 模式，与 Yarn, Yarn 2 和 PNPM 使用。

CSS 预处理器支持

Vite 为 Sass and Less 提供了更精细化的支持，包括改进 @import 解析（可使用别名与 npm 依赖）和 提供 url() 内联引入与变基。

Vue 第一优先级支持

Vite 最初是作为 Vue.js 开发工具的未来基础而创建的。尽管 Vite 2.0 版本完全不依赖于框架，但官方 Vue 插件仍然对 Vue 的单文件组件格式提供了一流的支持，

涵盖了所有高级特性，如模板资源引用解析、<script setup>，<style module>，自定义块等等。