Original video address: Next generation frontend tooling with ViteJS ✨ Open Source Friday ✨ [1]
Chinese and English subtitles video address (Station B): [Translation] Next-generation front-end tool ViteJS Chinese and English bilingual subtitles-Open Source Friday [2]
Chinese and English subtitles video address (Tencent Video): [Translation] Next-generation front-end tool ViteJS Chinese and English bilingual subtitles-Open Source Friday [3]
English subtitles: listening translation, YouTube automatic subtitles
English proofreading and translation: Ivocin [4]
Regarding Vite , let's see what the author himself said. This video is a live video of Vue [5] and Vite [6] author You Yuxi [7] on Twitch [8] as a guest on GitHub Open Source Friday [9] on February 12, 2021 . In the video, Youda's detailed explanation of Vite's various functions, Dashen online coding, online Debug, Dalu diss webpack, and philosophical thinking on Vite. This video is very long, nearly 70 minutes, the following is an excerpt of the video, you can choose the point of interest to send by yourself. It is strongly recommended that you watch the video, there are many details in it, I believe you will gain. Video address: [Translation] Next-generation front-end tool ViteJS Chinese and English bilingual subtitles-Open Source Friday [10]
Vite pronunciation problem
Video Transmission-1:18 [11] Soul torture about Vite pronunciation: Since Vite uses its French pronunciation, why doesn't Vue use its French pronunciation? (Probably because the French pronunciation is not good). Youda told us that the author said how to read it, then read it.
I personally think that the Vue and Vite documents are conscientious. First, I will explain the pronunciation of my name, so that developers around the world can recognize it. Let's look at Svelte [12] again , let alone the pronunciation, I still can't remember the spelling.
What is Vite
Video Transmission-2:33 [13]
You Da himself said that it is difficult to describe exactly what Vite is in one sentence. The main reason may be that it mainly consists of two parts, a development server based on ESM [14] using esbuild [15] , and the other part is a configurable packager based on Rollup [16] . Of course there are many other powerful functions, but it's more than a sentence. You Da said that the closest product on the market to Vite is Parcel [17] , but the implementation principles of the two are completely different.
Why does Vite appear at this moment
Video Delivery-4:53 [18] The
essential reason should be that most modern browsers (except IE 11) already support native ES modules very well, and the new version of Node also supports ESM. ESM can finally dominate the world in the near future. The original is incense.
Start Demo
Video Delivery-7 :05 [19] Without using @vitejs/create-app, create a Vite project demo from 0.
The entry file is index.html
Video Delivery- 14:25 [20]
Vite is Opinionated
Video delivery- 17: 08 [21] To
focus, Vite is Opinionated , and this content has been shown many times in the video. In fact, opinionated was originally a derogatory term, meaning stubborn, but when used in the field of computer science, it has become an absolute commendatory term. The tool that claims to be opinionated guarantees ease of use through conventions, and also provides configuration to ensure that it does not Will lose flexibility. A large number of best practice conventions are built into Vite, which eliminates tedious configuration and ensures that the functions commonly used by front-end developers are available out of the box. Opinionated About a PR of translation can refer to the Nuggets translation program [22] , a PR Vite Chinese documents [23] these two discussions. So the question is, are a few opinionated and unopinionated software. Let me come first: Opinionated has Vite [24] , Prettier [25] , Unopinionated such as webpack [26] . Of course, unopinionated is not a good word. No one should write that he is unopinionated in official documents. This paragraph is about webpack, see how the big guys diss webpack:
Will Vue CLI migrate to Vite?
Video delivery- 23 :56 [27] Not for the time being, it is still based on webpack, but it will definitely be migrated to Vite in the end.
Vite is framework agnostic
Video Delivery- 25:43 [28]
Vite provides a very well-defined JavaScript API that can be used at a higher level, such as VitePress [29] , which is the twin brother of VuePress [30] and is built on Vite.
Tailwind CSS + Vite combat
Video transmission-27:07 [31] Youda writes Tailwind code online and rolls over. 
The host ridiculed that Evan You also needs to debug.
Vite + React in action
Video transmission-35:30 [32] The host teased , we watched You Yuxi write React online!
About Esbuild-"Quickly" is just one word
Video Delivery-38:24 [33]
Esbuild is the reason why Vite is so fast, it is 20-30 times faster than traditional tsc. Vite uses esbuild instead of Rollup for pre-packaging, which is also very fast. Here Yuda revealed his work computer, the ARM-based Mac Book Pro equipped with the M1 chip . Unfortunately, esbuild at that time did not support the ARM architecture, but the latest version of Go already supports it. Unexpectedly, a few days later, esbuild released its version supporting the M1 chip. Youda tested it in the first place:
What is DX
Video Transmission-47:36 [34] During the video translation process, I heard You Da say the word DX. I didn’t know what it meant, and I listened to it many times. Later, Google discovered that DX was originally developed by Developer Experience. Meaning, it seems that there is an official term for caring for developers. For the explanation of DX, please refer to What Is DX\? \(Developer Experience\) [35] . 
Vite uses its fast features to greatly enhance the developer's experience. To put it bluntly, he is like a spoiled child. It is difficult for him to endure the project for more than 1 second.
About SSR
Video Transmission-52:20 [36] SSR is still in the experimental stage, please refer to the official website document [37] for details .
About HMR
Video Delivery-57:59 [38] Vite really solves the problem of HMR speed and slower and slower as the application becomes larger and larger.
Why not use esbuild in production mode, isn't it faster?
Video Delivery-65:31 [39] Actually I want to use it, but esbuild is not robust enough to support production packages, and many configurations cannot be achieved through esbuild. So for now, Rollup is a good choice, although it is far slower than esbuild. In addition, you can use esbuild as a compressor instead of terser. See build.minify [40] for details . This will be faster, but the package volume may increase by about 5%-10%, depending on the user's choice.
postscript
It’s been a long time since I did such a large-scale video translation. The last time was the translation of React Conf 2018 [41] . The translation of this video started on February 15th during the Spring Festival holiday. There was relatively little time after the start of construction, and it took more than three weeks intermittently. Fortunately, GitHub uploaded the video to YouTube after the Twitch video expired. Using its automatic subtitle function, it saved a lot of time later. Indeed, YouTube’s voice-to-text function is more powerful. If you find any problems with subtitles, please leave a message in the video comment area. Hope this video can help everyone.
Author: Kiyoaki
link: https: //juejin.cn/post/6937176680251424775
Source: Nuggets
copyright reserved by the authors. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.
Reference
[1]
Next generation frontend tooling with ViteJS ✨ Open Source Friday ✨: https://www.youtube.com/watch?v=UJypSr8IhKY
[2][Translation] The next generation front-end tool ViteJS Chinese and English subtitles-Open Source Friday: https://www.bilibili.com/video/BV1kh411Q7WN
[3][Translation] The next generation front-end tool ViteJS Chinese and English bilingual subtitles-Open Source Friday: https://v.qq.com/x/page/z3232ldhxho.html
[4]Ivocin: https://github.com/Ivocin
[5]View: https://v3.vuejs.org/
[6]Quick: https://vitejs.dev/
[7]You Yuxi: https://github.com/yyx990803
[8]Twitch: https://www.twitch.tv/
[9]GitHub Open Source Friday: https://www.youtube.com/watch?v=qXHiXSSD3Kc&list=PL0lo9MOBetEFmtstItnKlhJJVmMghxc0P
[10][Translation] The next generation front-end tool ViteJS Chinese and English subtitles-Open Source Friday: https://www.bilibili.com/video/BV1kh411Q7WN
[11]Video Transmission-1:18: https://www.bilibili.com/video/BV1kh411Q7WN?t=1m18s
[12]Svelte: https://svelte.dev/
[13]Video Transmission-2:33: https://www.bilibili.com/video/BV1kh411Q7WN?t=2m33s
[14]ESM: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[15]esbuild: https://esbuild.github.io/
[16]Rollup: http://rollupjs.org/guide/en/
[17]Parcel: https://parceljs.org/
[18]Video Transmission-4:53: https://www.bilibili.com/video/BV1kh411Q7WN?t=4m53s
[19]Video Delivery-7:05: https://www.bilibili.com/video/BV1kh411Q7WN?t=7m5s
[20]Video Delivery-14:25: https://www.bilibili.com/video/BV1kh411Q7WN?t=14m25s
[21]Video transmission-17:08: https://www.bilibili.com/video/BV1kh411Q7WN?t=17m8s
[22]A PR of the Nuggets Translation Project: https://github.com/xitu/gold-miner/pull/7984#issuecomment-782794534
[23]A PR of Vite Chinese documents: https://github.com/vitejs/docs-cn/pull/17#discussion_r578294432
[24]Quick: https://vitejs.dev/
[25]Prettier: https://prettier.io/
[26]webpack: https://webpack.js.org/
[27]Video Transmission-23:56: https://www.bilibili.com/video/BV1kh411Q7WN?t=23m56s
[28]Video Transmission-25:43: https://www.bilibili.com/video/BV1kh411Q7WN?t=25m43s
[29]VitePress: https://vitepress.vuejs.org/
[30]VuePress: https://vuepress.vuejs.org/
[31]Video Transmission-27:07: https://www.bilibili.com/video/BV1kh411Q7WN?t=27m7s
[32]Video transmission-35:30: https://www.bilibili.com/video/BV1kh411Q7WN?t=35m30s
[33]Video Transmission-38:24: https://www.bilibili.com/video/BV1kh411Q7WN?t=38m24s
[34]Video Transmission-47:36: https://www.bilibili.com/video/BV1kh411Q7WN?t=47m36s
[35]What Is DX? (Developer Experience): https://medium.com/swlh/what-is-dx-developer-experience-401a0e44a9d9
[36]Video Transmission-52:20: https://www.bilibili.com/video/BV1kh411Q7WN?t=52m20s
[37]Official website document: https://vitejs.dev/guide/ssr.html
[38]Video transmission-57:59: https://www.bilibili.com/video/BV1kh411Q7WN?t=57m59s
[39]Video Transmission-65:31: https://www.bilibili.com/video/BV1kh411Q7WN?t=65m31s
[40]build.minify: https://vitejs.dev/config/#build-minify
[41]Translation of React Conf 2018: https://juejin.cn/post/6844903726684061710