Vite 2.0 发布了！

Vite 2.0 正式发布了！javascript

Vite（法语意思是 “快”，发音为 /vit/，相似 veet）是一种全新的前端构建工具。你能够把它理解为一个开箱即用的开发服务器 + 打包工具的组合，可是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。html

Vite 有多快？在 Repl.it 上从零启动一个基于 Vite 的 React 应用，浏览器页面加载完毕的时候，CRA（create-react-app）甚至尚未装完依赖。前端

若是你还没据说过 Vite 究竟是什么，能够到这里了解一下项目的设计初衷。若是你想要了解 Vite 跟其它一些相似的工具备什么区别，能够参考这里的对比。vue

2.0 带来了什么

Vite 1.0 虽然以前进入了 RC 阶段，但在发布以前咱们决定进行一次完全的重构来解决一些设计缺陷。因此 Vite 2.0 实际上是 Vite 的第一个稳定版本。2.0 带来了大量的改进：java

多框架支持react

Vite 一开始主要注重于 Vue 的单文件组件支持，但 2.0 基于以前的经验提供了一个更稳定灵活的内部架构，从而能够彻底经过插件机制来支持任意框架。如今 Vite 提供官方的 Vue, React, Preact, Lit Element 项目模版，而 Svelte 社区也在开发 Vite 整合方案。webpack

全新插件机制和 APIgit

Vite 2.0 受 WMR 的启发采用了基于 Rollup 插件 API 的设计。不少 Rollup 插件能够跟 Vite 直接兼容。插件能够在使用 Rollup 插件钩子以外使用一些额外的 Vite 特有的 API 来处理一些打包中不存在的需求，好比区分开发 vs 打包，或是自定义的热更新处理。github

Vite 的 JS API 也获得了大幅改进 - 已经有很多用户在开发基于 Vite 的上层框架，Nuxt 团队也已经在 Nuxt 3 中验证了初步整合的可行性。web

基于 esbuild 的依赖预打包

因为 Vite 是一个基于原生 ESM 的开发服务器，在启动时咱们须要经过依赖预打包来达成两个目的：1. 减小模块 / 请求数量； 2. 支持 CommonJS 依赖。预打包只有在依赖变更时才须要执行，但在有大量依赖的项目中，每次执行仍是可能会须要很长时间。Vite 以前是使用 Rollup 来执行这个过程，在 2.0 中咱们切换到了 esbuild，使这个过程加快了几十倍。冷启动一个以前须要将近 30 秒预打包的项目如今只须要不到两秒！从 webpack 或其它打包工具迁移到 Vite 应该也会有相似的速度改善。

更好的 CSS 支持
Vite 将 CSS 看做模块系统中的一等公民，而且内置了一下支持：

强化路径解析：CSS 中的 @import 和 url() 路径都经过 Vite 的路径解析器来解析，从而支持 alias 和 npm 依赖。
自动 URL 改写：全部 url() 路径都会被自动改写从而确保在开发和构建中都指向正确的文件路径。
CSS 代码分割：构建时每个被分割的 JS 文件都会自动生成一个对应的 CSS 文件，而且两个文件会被自动并行按需加载。

服务端渲染 (SSR) 支持

Vite 2.0 提供实验性的 SSR 支持。Vite 提供一个灵活的 API 来在 Node.js 中高效率地直接加载 ESM 源码（而且一样有精准的更新而不须要打包）。提供 CommonJS 版本的依赖会在 SSR 时自动被跳过转换直接加载。生产环境下，服务器能够和 Vite 彻底解耦。基于 Vite SSR 的架构也能够很方便的作静态预渲染（SSG)。

旧浏览器支持
Vite 默认只支持原生支持 ESM 的现代浏览器，但能够经过官方的 @vitejs/plugin-legacy 来支持旧浏览器。legacy 插件会自动额外生成一个针对旧浏览器的包，而且在 html 中插入根据浏览器 ESM 支持来选择性加载对应包的代码（相似 vue-cli 的 modern mode）。
尝试一下！

功能不少，可是试一下其实很简单。只须要一分钟，用如下命令就能够迅速搭起一个基于 vite 的项目（确保你的 Node.js 版本 >=12）：

npm init @vitejs/app
复制代码

本文已获做者尤雨溪受权转载，原文地址：zhuanlan.zhihu.com/p/351147547

PS：Vite标签也已经上线：juejin.cn/tag/Vite