下一代前端构建工具 Vite (中英双语字幕)

科林-Colin 等级 708 0 0

关于 Vite,来看看作者本人怎么说。本视频是 Vue 以及 Vite 作者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上做客 GitHub Open Source Friday 节目的直播视频。在视频里有尤大关于 Vite 的各项功能的详细阐述、大神在线编码、在线 Debug、大佬 diss webpack 以及对 Vite 的哲学思考。本视频很长,接近 70 分钟,下面是视频摘录,大家可以选择自己感兴趣的点自行传送。强烈建议大家观看视频,里面有很多细节相信大家会有收获。视频地址:【译】下一代前端工具 ViteJS 中英双语字幕 - Open Source Friday

Vite 的发音问题

视频传送 - 1:18

有关 Vite 发音的灵魂拷问:既然 Vite 使用的是其法语发音,那为什么 Vue 不用它的法语发音呢?(大概是因为法语读音不好听吧)。尤大告诉我们,作者说怎么读那就怎么读吧。

下一代前端构建工具 Vite (中英双语字幕)

个人认为 Vue 和 Vite 的文档堪称良心了,首先就交代自己名字的发音,让全球开发者统一认知。再来看 Svelte,别说发音了,至今拼写还记不住。

Vite 是什么

视频传送 - 2:33

下一代前端构建工具 Vite (中英双语字幕)

尤大自己也说,很难一句话描述清楚 Vite 到底是什么。主要原因可能是它主要包括两个部分,一个基于 ESM 的利用 esbuild 的开发服务器,另一个部分是基于 Rollup 的配置化的打包器。当然还有很多其他强大的功能,但是已经超过一句话了。尤大说市面上最接近 Vite 的产品是 Parcel,但二者的实现原理完全不同。

为什么 Vite 在此刻出现

视频传送 - 4:53

下一代前端构建工具 Vite (中英双语字幕)

本质原因应该是大部分现代浏览器(除了 IE 11)已经对原生 ES 模块支持的很好了,而且新版的 Node 也支持 ESM 了。ESM 终于可以在不久的将来一统江湖。原生的就是香。

起步 Demo

视频传送 - 7:05

不使用 @vitejs/create-app,从 0 开始创建一个 Vite 工程 demo。

下一代前端构建工具 Vite (中英双语字幕)

入口文件是 index.html

视频传送 - 14:25

下一代前端构建工具 Vite (中英双语字幕)

Vite 是 Opinionated 的

视频传送 - 17:08

下一代前端构建工具 Vite (中英双语字幕)

划重点,Vite 是 Opinionated 的,视频里多次展示了这块内容。

其实 opinionated 本来是个贬义词,是固执己见的意思,而用在计算机科学领域,又变成了一个绝对的褒义词,号称自己 opinionated 的工具通过约定保证了易用性,又提供了配置以保证不会丧失灵活性。Vite 中内置了大量最佳实践的约定,省去了繁琐的配置,保证前端开发者常用的功能都是开箱即用的。

关于 Opinionated 的译法可以参考 掘金翻译计划的一个 PR,Vite 中文文档的一个 PR 这两处的讨论。

那么问题来了,列出几个 opinionatedunopinionated 的软件。我先来:Opinionated 的有 Vite、Prettier, Unopinionated 的比如 webpack,当然 unopinionated 可不是好词,应该不会有人在官方文档里写自己是 unopinionated 的。

这段是关于 webpack 的,看大佬如何 diss webpack:

下一代前端构建工具 Vite (中英双语字幕)

Vue CLI 会迁移到 Vite 上吗

视频传送 - 23:56

暂时不会,目前依然是基于 webpack 的,但是最终肯定是会迁移到 Vite 上的。

下一代前端构建工具 Vite (中英双语字幕)

Vite 是框架无关的

视频传送 - 25:43

下一代前端构建工具 Vite (中英双语字幕)

Vite 提供了定义得非常好的 JavaScript API,可以在更高层级使用,比如 VitePress,它是 VuePress 的孪生兄弟,基于 Vite 构建。

Tailwind CSS + Vite 实战

视频传送 - 27:07

尤大在线编写 Tailwind 代码翻车。

下一代前端构建工具 Vite (中英双语字幕)

主持人调侃,原来 Evan You 也需要 debug 啊。

下一代前端构建工具 Vite (中英双语字幕)

Vite + React 实战

视频传送 - 35:30

主持人调侃,我们在线围观尤雨溪写 React!

下一代前端构建工具 Vite (中英双语字幕)

关于 Esbuild —— “快”就一个字

视频传送 - 38:24

下一代前端构建工具 Vite (中英双语字幕)

Esbuild 是 Vite 为何如此快速的原因,它比传统 tsc 快 20-30 倍。Vite 用 esbuild 替代 Rollup 进行预打包,速度也非常快。

这里尤大透露了他的工作电脑,搭载 M1 芯片的 ARM 架构的 Mac Book Pro,遗憾的是,当时的 esbuild 还不支持 ARM 架构,但 Go 的最新版已经支持。没想到过了几天,esbuild 就发布了其支持 M1 芯片的版本,尤大在第一时间做了测试:

下一代前端构建工具 Vite (中英双语字幕)

DX 是啥

视频传送 - 47:36

在视频翻译过程中,听到尤大说了 DX 一词,由于不知道是什么含义,反反复复听了好多遍,后来 Google 发现,原来 DX 是 Developer Experience 的意思,看来关爱开发者是有官方术语的,关于 DX 的解释可以参考 What Is DX? (Developer Experience)。

下一代前端构建工具 Vite (中英双语字幕)

Vite 利用其快速的特性,极大提升了开发者的体验,尤大直言,他就像被宠坏了的孩子,项目启动超过 1 秒,他就很难忍受了。

下一代前端构建工具 Vite (中英双语字幕)

下一代前端构建工具 Vite (中英双语字幕)

关于 SSR

视频传送 - 52:20

SSR 目前还处于实验阶段,详见官网文档。

关于 HMR

视频传送 - 57:59

Vite 真正解决了 HMR 速度与随着应用越来越大而越来越慢的问题。

下一代前端构建工具 Vite (中英双语字幕)

为啥生产模式不用 esbuild,不是更快吗?

视频传送 - 65:31

其实也想用,但是 esbuild 目前对生产包支持不够健壮,很多配置无法通过 esbuild 实现。所以目前而言,Rollup 是一个好选择,虽然远比 esbuild 慢。

另外,可以用 esbuild 作为压缩器,替代 terser,详见 build.minify,这样会更快,但是包的体积可能会有 5% - 10% 左右的增长,看用户取舍。

后记

好久没有做这么大型视频的翻译了,上一次还是 React Conf 2018 的翻译。本视频翻译从春节假期 2 月 15 日开始,开工后时间比较少,断断续续花了三周多时间。好在 GitHub 在 Twitch 视频失效后,视频上传到了 YouTube 上,利用其自动字幕功能,后期节省了很多时间。确实 YouTube 的语音转文字功能更为强大。如果发现字幕存在问题,欢迎在视频评论区留言。希望这个视频能够帮助到大家。

本文转自 https://juejin.cn/post/6937176680251424775,如有侵权,请联系删除。

收藏
评论区

相关推荐

下一代前端构建工具 Vite (中英双语字幕)
关于 Vite,来看看作者本人怎么说。本视频是 Vue 以及 Vite 作者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上做客 GitHub Open Source Friday 节目的直播视频。在视频里有尤大关于 Vite 的各项功能的详细阐述、大神在线编码、在线 Debug、大佬 diss webpack 以及对 Vite 的哲学思考。
[译]尤雨溪: Vite 会取代 vue-cli 吗?
前言 最近在逛 Twitter 时,突发奇想去看了一眼尤大的账号,发现了一段有趣的推文,在尤大国内的社交平台账号中(_知乎、微博等_)并没有发现他发表过类似的话,倒是听过他说会有越来越多的人弃坑 Webpack 用 Vite,还听过有人说 vuecli 的下一个版本就要用 vite 重构了,不过看尤雨溪这说法,好像是 vite 是 vite,cli
开发 vue3 + ts + vite / webpack 的管理系统
cooladmin 地址 演示 账户:admin 密码:123456 介绍 由来cooladmin自 2018 年初以来,一直本着快速通用开发为理念,同时看重每个页面的设计,无论在代码上还是 UI 设计上都受到广大开发者的喜爱。cool是酷的意思,admin一般的认知是
Vue3.0系列——「vue3.0学习手册」第一期
Vue3.0一、项目搭建vite是尤大大开发的一款意图取代webpack的工具。其实现原理是利用ES6的import发送请求加载文件的特性。拦截这些请求,做一些编译,省去webpack冗长的打包时间。并将其与Rollup捆绑在一起用于生产。在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器,浏览器通过本机<script module支持对
Webpack学习整理集锦【从最基础的demo入手,自己实现一个脚手架 】
前言本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。开源网址https://github.com/maomi
webpack 基本配置
概念本 质上,webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。当 webpack处理应用程序时,它会递归地构建一个 依 赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle 。 安装确保安装了nodejs 项目文件环境cd
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
vue3.0-template-admin | 一款基于vite的开箱即用的后台管理模版
今天给大家推荐一款我朋友基于vite开发的开箱即用的后台管理模版 vue3.0templateadmin. 目前已在github上完全开源, 相关配套功能非常齐全, 大家可以一键clone这个项目快速搭建后台管理系统, 如果想快速上手 vite + vue3.0 开发的朋友, 这个项目也是不错的选择.vue3.0templateadmin基于常见业务场景,抽
Vite 2.0 正式发布!依赖预构建,CSS 分割等众多新特性到来
![](https://oscimg.oschina.net/oscnet/0e7ee4c6-1ae8-4286-96e9-d39ec922d6fe.png "屏幕截图.png") Vite 今天我非常高兴的宣布 Vite 2.0 的官方发布! Vite(法语中“快”的意思,发音为 `/vit/`)是一种新型 Web 开发构建工具。把它想成一个更轻、更
vite tailwindcss 简单安装配置和使用
原文链接: [vite tailwindcss 简单安装配置和使用](https://my.oschina.net/ahaoboy/blog/4937909) 参考 [https://tailwindcomponents.com/blog/how-to-install-tailwindcss-in-vite](https://www.oschina.ne
vite 尝试和入门
原文链接: [vite 尝试和入门](https://my.oschina.net/ahaoboy/blog/4314948) [Vite 原理浅析](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.lizenghai.com%2Farchives%2F71027.html) [
vite 提交PR 支持CJS引入 [已经被拒了]
原文链接: [vite 提交PR 支持CJS引入 \[已经被拒了\]](https://my.oschina.net/ahaoboy/blog/4318627) 看这个样子应该是已经支持了, 可能我fork的版本不对或者使用姿势不对吧 ![](https://oscimg.oschina.net/oscnet/up-6a6efe95c5b5448ca7c
10分钟了解一下最近很火的Vite
![](https://oscimg.oschina.net/oscnet/155d0d0c-b907-46ab-a172-a8cb686c6ead.png) 关注公众号 **前端人**,回复“**加群**” 添加无广告学习群 > Vite 是 vue的作者尤雨溪开发的打包工具,目前亮点是本地开发时热加载编译极快,在大型项目中体验较
18个常用 webpack插件,总会有适合你的!
![](https://oscimg.oschina.net/oscnet/71317da0c57a8e8cf5011c00e302a914609.jpg) 来源 | https://github.com/Michael-lzg/my--article/blob/master/webpack/ **Plugin** ---------- 何为插
ElementPlusViteStarterPnpm版本
1 起因 ==== 由于最近`Vite`升级了2.x版本,项目中需要改动的东西有点多,本来想基于官方给出的[starter](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Felement-plus%2Felement-plus-vite-starter)重做,但