Vite
今天我非常高兴的宣布 Vite 2.0 的官方发布！
Vite（法语中“快”的意思，发音为 /vit/）是一种新型 Web 开发构建工具。把它想成一个更轻、更快的预配置开发服务器 + 打包的组合工具。它利用了浏览器 native ES modules[1] 的支持，还有如 esbuild[2] 等编译工具来提供时髦酷炫的本地开发体验。
在 Repl.it 上的这个视频[3]可以证明 Vite 有多快，甚至容器还没开始引导 create-react-app 文件的时候，Vite 就开始运行。
如果你还没听说过 Vite，并且想尝试的话，先看 Vite 的基本原理[4]。如果你对 Vite 和其他类似工具的对比感兴趣的话，看看这个对比[5]。
原文地址：https://dev.to/yyx990803/announcing-vite-2-0-2f0a
翻译 / 润色：ssh
Vite 2.0 更新了什么？
其实在发布 Vite 的第一个稳定版本：1.0 RC 之前，我们就决定完全重构内部代码。换而言之，Vite 2.0 带来了相比之前版本巨大的改进。
框架无关的内核
Vite 的最初版本始于一个 比较 hacky 的基于 ESM 运行 Vue 单文件服务的原型[6]。Vite 1 是这个想法的延续，并且在此之上实现了 HMR（Hot Module Replacement）。
Vite 2.0 带着我们一路走来的总结提炼，从头开始设计，实现了更加坚固的内部架构。现在它完全和框架无关，并且所有的框架特定支持都由插件来代理实现。目前有 Vue, React, Preact, Lit Element 的官方模板[7]，社区也正在为整合 Svelte 而努力。
新的插件格式和 API
灵感来源于 WMR[8]，新的插件系统继承了 Rollup 的 plugin 接口，并且兼容很多现成的 Rollup plugins[9]。插件可以使用兼容 Rollup 的钩子，并且加入了一些 Vite 特有的钩子和属性来调整仅适用于 Vite 的行为（例如区分 dev vs. build 或者 HMR 的自定义行为）。
编程式的 API[10] 也极大地促进了基于 Vite 的更高维度的工具 / 框架。
esbuild 驱动的依赖预打包
由于 Vite 是原生 ESM 开发服务器，它为了减少浏览器请求次数和把 CommonJS 转成 ESM，做了预打包。原来的 Vite 用的是 Rollup 完成这件事，Vite 2.0 开始用 esbuild 来实现 10-100 的速度提升。
作为一个参考，冷启动一个像 React Meterial UI 这样依赖非常重的项目，原先需要 28 秒，现在在 M1 的 Macbook Pro 上只需要 1.5 秒左右。
如果你正在从传统打包方式的启动切换过来的话，期待更多类似的提升吧！
一等的 CSS 支持
Vite 把 CSS 视作模块图中的一等公民，开箱即用的支持如下功能：
增强解析器：Vite 增强了 CSS 中的
@import和url()路径的解析，支持别名和 npm 依赖的解析。URL 解析基础路径：无论在哪里使用
url()，都自动解析基础路径。（参考 Public Base Path [11]）CSS 代码分割：一个代码分割的
JS chunk同样会输出一个相应的 CSS 文件，它会在请求的时候自动并行加载。
可选的旧版浏览器支持
Vite 默认目标是支持原生 ESM 的新版浏览器，你也可以选择通过官方的 @vitejs/plugin-legacy[12] 支持旧版浏览器。这个插件可以自动生成新版 / 旧版两种产物。根据浏览器是否支持来决定加载哪一份代码。
试试看
尽管这些特性让你眼花缭乱，但是开始使用 Vite 是非常简单的！你可以在一分钟以内启动一个基于 Vite 的应用，用下面的命令即可（Node.js 版本需要 >= 12）：
npm init @vitejs/app
记得看看这份Vite 中文指南[13]，Vite 提供了很多开箱即用的功能。你也可以在 Github[14] 上查看源码，在 Twitter[15] 上追更，或者在 Discord chat server[16] 上和其他 Vite 用户交流。
感谢大家
欢迎关注 ssh，前端潮流趋势、原创面试热点文章应有尽有。
记得关注后加我好友，我会不定期分享前端知识，行业信息。2021 陪你一起度过。
点赞并分享给你的朋友是最好的支持~
参考资料
[1]
native ES modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[2]
esbuild: https://esbuild.github.io/
[3]
Repl.it 上的这个视频: https://twitter.com/amasad/status/1355379680275128321
[4]
Vite 的基本原理: https://vitejs.dev/guide/why.html
[5]
对比: https://vitejs.dev/guide/comparisons.html
[6]
比较 hacky 的基于 ESM 运行 Vue 单文件服务的原型: https://github.com/vuejs/vue-dev-server
[7]
Vue, React, Preact, Lit Element 的官方模板: https://github.com/vitejs/vite/tree/main/packages/create-app
[8]
WMR: https://github.com/preactjs/wmr
[9]
兼容很多现成的 Rollup plugins: https://vite-rollup-plugins.patak.dev/
[10]
编程式的 API: https://vitejs.dev/guide/api-javascript.html
[11]
Public Base Path: https://vitejs.dev/guide/build.html#public-base-path
[12]
@vitejs/plugin-legacy: https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
[13]
Vite 中文指南: https://cn.vitejs.dev/guide/
[14]
Github: https://github.com/vitejs/vite
[15]
Twitter: https://twitter.com/vite\_js
[16]
Discord chat server: http://chat.vitejs.dev/
本文分享自微信公众号 - 前端从进阶到入院（code_with_love）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
