Redmi Buds 4開箱簡評：才199還有降噪 可以無腦入
在上個月舉辦的Redmi Note11T Pro系列新機(jī)發(fā)布會上，除了兩款手機(jī)新品之外，Redmi還帶來了兩款TWS真無線藍(lán)牙耳機(jī)產(chǎn)品，Redmi Buds 4和Redmi Buds 4 Pro，此前我們在Redmi Note11T
在Web開發(fā)的大千世界里，想要不聽到關(guān)于Vite[1]的討論，那可真是難上加難。
自2020年4月發(fā)布以來，Vite的人氣就像坐了火箭一樣直線上升。截至寫這篇文章的時候，這個項目在GitHub上已經(jīng)獲得了超過64k的star，并且在每周的npm下載量上超過了1200萬，現(xiàn)在它支持著大多數(shù)開源框架，比如Nuxt[2]、SvelteKit[3]、Astro[4]、SolidStart[5]和Remix[6]（這只是冰山一角）。
如果你想了解Vite的歷史，推薦你觀看Evan You在ViteConf 2022上的主旨演講[7]。
盡管Vite聲名鵲起，但我們意識到許多開發(fā)者可能仍然不熟悉Vite是什么，或者它在推動現(xiàn)代Web框架和工具開發(fā)中扮演的關(guān)鍵角色。
在這篇文章中，我們將為你提供一個關(guān)于Vite的入門指南，以及它是如何在短短幾年內(nèi)成長為現(xiàn)代Web的中堅力量。
Vite的發(fā)音是/vit/，在法語中意味著“快速”或“迅速”，而且Vite絕對不負(fù)其名。
簡單來說，Vite[8]是一個現(xiàn)代JavaScript構(gòu)建工具，它為常見的Web模式提供了開箱即用的支持，提供了優(yōu)化的構(gòu)建，結(jié)合了rollup[9]的靈活性和成熟度，以及由esbuild[10]實現(xiàn)的快速無捆綁開發(fā)服務(wù)器和原生ES模塊。
Vite由Vue.js[11]的創(chuàng)造者Evan You[12]構(gòu)思，目的是通過減少開發(fā)者在啟動開發(fā)服務(wù)器和文件編輯后處理重新加載時遇到的瓶頸來簡化打包過程。
當(dāng)你運行Vite時，你會注意到的第一個不同是開發(fā)服務(wù)器幾乎是瞬間啟動的。你可以訪問vite.new[13]并親眼見證。這是因為Vite采用了按需服務(wù)的方式來將你的應(yīng)用程序提供給瀏覽器。Vite不是首先打包整個源代碼，而是根據(jù)瀏覽器的請求，實時將你編寫的模塊轉(zhuǎn)換為瀏覽器能夠理解的原生ESM模塊。Vite開箱即支持TypeScript、PostCSS、CSS預(yù)處理器、JSON、WASM等，并且可以通過不斷增長的插件生態(tài)系統(tǒng)擴(kuò)展來支持你所有喜愛的框架和工具。
在開發(fā)過程中，每當(dāng)你在項目中更改任何文件時，Vite都會使用應(yīng)用程序的模塊圖只熱重載受影響的模塊（HMR）。這允許開發(fā)者預(yù)覽他們的更改以及這些更改對應(yīng)用程序的影響。Vite HMR的速度非?？欤灾劣诳梢栽试S編輯器自動保存，獲得類似于在瀏覽器開發(fā)工具中修改CSS時的反饋循環(huán)。
Vite還執(zhí)行依賴預(yù)打包。在開發(fā)過程中，它使用esbuild捆綁你的依賴項并將它們緩存起來，以加快未來的服務(wù)器啟動速度。這個優(yōu)化步驟還有助于加快加載時間，特別是對于導(dǎo)出許多小模塊的依賴項（如lodash），因為瀏覽器每個依賴項只加載幾個塊而不是多個。它還允許Vite支持CommonJS和UMD代碼中的依賴項，因為它們被捆綁成原生ESM模塊。
當(dāng)你準(zhǔn)備部署時，Vite將使用優(yōu)化的Rollup設(shè)置構(gòu)建你的應(yīng)用程序。它執(zhí)行CSS代碼拆分，添加預(yù)加載指令，并優(yōu)化異步塊的加載，無需任何配置。Vite提供了一個通用的與Rollup兼容的插件API，適用于開發(fā)和生產(chǎn)，使其更容易擴(kuò)展和自定義你的構(gòu)建過程。
使用Vite有幾個關(guān)鍵好處[14]。以下是我們最喜歡的一些：
Vite是由一群開源開發(fā)者開發(fā)的，由來自不同背景的開發(fā)團(tuán)隊[15]帶頭。Vite核心倉庫最近已經(jīng)超過900個貢獻(xiàn)者。它正在積極開發(fā)和維護(hù)，新功能不斷實現(xiàn)，漏洞也在穩(wěn)定地得到修復(fù)。這也意味著不斷發(fā)展的功能集反映了大量多樣化產(chǎn)品的真實應(yīng)用需求的交叉部分。
開發(fā)體驗（DX）是Vite的核心，每次保存時你都能感受到它。我們常常認(rèn)為重新加載的速度是理所當(dāng)然的。但隨著你的應(yīng)用程序增長，重新加載速度逐漸變慢，你會感激Vite保持（幾乎）即時重新加載的能力，無論應(yīng)用程序大小如何。
Vite的方法受到了非常好的接受，大多數(shù)框架和工具默認(rèn)使用Vite或提供一流的支持。通過選擇Vite作為構(gòu)建工具，這些項目的維護(hù)者可以在它們之間共享一個共同的基礎(chǔ)，并隨著時間的推移共同改進(jìn)它。因此，他們可以花更多的時間開發(fā)用戶需要的功能，而不是重新發(fā)明輪子。
這對每個人都是雙贏的。
Vite對Rollup插件API的賭注得到了回報。插件允許下游項目共享Vite核心提供的功能。有許多高質(zhì)量的插件可供使用，如vite-plugin-pwa[16]和vite-imagetools[17]。
Vite是現(xiàn)代元框架正在構(gòu)建的大塊之一。它是正在采取類似路徑的更大工具生態(tài)系統(tǒng)的一部分。Volar[18]是StackBlitz團(tuán)隊自豪支持的另一個工具。它為自定義編程語言（如Vue、MDX和Astro）提供了在代碼編輯器中構(gòu)建堅實且高效編輯體驗所需的工具。它允許框架為其用戶提供懸停信息、診斷和自動補全等功能，共享Volar作為共同基礎(chǔ)來為它們提供動力。另一個絕佳的例子是Nitro[19]，一個服務(wù)器工具包，用于創(chuàng)建支持每個主要部署平臺的全功能Web服務(wù)器。它是一系列框架無關(guān)的庫UnJS[20]的一部分。還有Dev Toolkit[21]，這是一個新的努力，旨在為框架開發(fā)工具共享一個共同的基礎(chǔ)。
對于像StackBlitz和Vite這樣的工具，理解它們?yōu)楹尾煌詈玫姆绞骄褪怯H自嘗試。Vite在StackBlitz中得到了全面支持[22]，這使得創(chuàng)建按需環(huán)境變得輕而易舉。Vite團(tuán)隊使用StackBlitz來驅(qū)動其在線啟動器[23]。點擊你最喜歡的框架，編輯一些組件，看看Vite是如何工作的。
在使用Vite開發(fā)時，你可以運行三個命令。
確保在運行vite preview之前運行vite build，以查看你的更改。
在最近的ViteConf主題演講[24]中，Evan分享了盡管Vite正在取得巨大進(jìn)步，但項目仍面臨一些已知的問題和挑戰(zhàn)。
正如我們之前討論的，Vite目前使用Rollup進(jìn)行生產(chǎn)構(gòu)建。這并不像esbuild或Bun這樣的原生打包器那樣快。Vite還盡可能地減少了開發(fā)環(huán)境和生產(chǎn)環(huán)境之間的不一致性，但由于Rollup和esbuild之間的差異，一些不一致性是不可避免的。
Evan現(xiàn)在帶領(lǐng)一個新團(tuán)隊開發(fā)Rolldown[25]，這是一款基于Rust的Rollup端口，建立在OXC[26]（JavaScript氧化編譯器）之上，力求與Rollup兼容。這個想法是用Rolldown替換Vite中的Rollup和esbuild。Vite將擁有一個單一的基礎(chǔ)，結(jié)合了Rollup的靈活性和esbuild的速度，消除了不一致性，使代碼庫更易于維護(hù)，并加快了構(gòu)建時間。
Rolldown目前還處于早期階段，但已經(jīng)顯示出了有希望的結(jié)果。該項目現(xiàn)在已開源，Rolldown團(tuán)隊正在尋找貢獻(xiàn)者來幫助實現(xiàn)這一愿景。
與此同時，Vite團(tuán)隊在每個版本中都在不斷改進(jìn)Vite。由Vitest[27]和Nuxt Dev SSR[28]驅(qū)動的引擎vite-node[29]的工作已經(jīng)開始，演變成Vite API的全面修訂，面向框架作者。新的環(huán)境API[30]預(yù)計將在Vite v6中發(fā)布，它將成為自Vite 2發(fā)布以來Vite最大的變化之一。它將允許在任何數(shù)量的環(huán)境中通過Vite插件管道運行代碼，解鎖了對workers、RSC等的一級支持。
Vite正在開辟一條前進(jìn)的道路，并且正在迅速成為JavaScript生態(tài)系統(tǒng)中的標(biāo)準(zhǔn)構(gòu)建工具。
StackBlitz很自豪能夠成為Vite的支持者，我們期待看到2024年項目如何發(fā)展！
今天就試試https://vite.new[31]，并關(guān)注更多Vite相關(guān)新聞[32]。
本文譯自：https://blog.stackblitz.com/posts/what-is-vite-introduction/
[1]Vite: https://vitejs.dev/
[2]Nuxt: https://nuxt.com/
[3]SvelteKit: https://kit.svelte.dev/
[4]Astro: https://astro.build/
[5]SolidStart: https://start.solidjs.com/
[6]Remix: https://remix.run/
[7]Evan You在ViteConf 2022上的主旨演講: https://viteconf.org/23/replay/vite_keynote
[8]Vite: https://vitejs.dev/guide/
[9]rollup: https://rollupjs.org/
[10]esbuild: https://esbuild.github.io/
[11]Vue.js: https://vuejs.org/
[12]Evan You: https://twitter.com/youyuxi
[13]vite.new: https://vite.new/
[14]關(guān)鍵好處: https://vitejs.dev/guide/why.html
[15]開發(fā)團(tuán)隊: https://vitejs.dev/team
[16]vite-plugin-pwa: https://vite-pwa-org.netlify.app/
[17]vite-imagetools: https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite
[18]Volar: https://volarjs.dev/
[19]Nitro: https://nitro.unjs.io/
[20]UnJS: https://unjs.io/
[21]Dev Toolkit: https://www.youtube.com/watch?v=E6kTiIbU3N8
[22]全面支持: https://blog.stackblitz.com/posts/vite-new-templates/
[23]在線啟動器: https://vitejs.dev/guide/#trying-vite-online
[24]最近的ViteConf主題演講: https://viteconf.org/23/replay/vite_keynote
[25]Rolldown: https://chat.rolldown.rs/
[26]OXC: https://oxc-project.github.io/
[27]Vitest: https://vitest.dev/
[28]Nuxt Dev SSR: https://antfu.me/posts/dev-ssr-on-nuxt
[29]vite-node: https://github.com/vitest-dev/vitest/tree/main/packages/vite-node#readme
[30]環(huán)境API: https://github.com/vitejs/vite/discussions/16358
[31]https://vite.new: https://vite.new/
[32]Vite相關(guān)新聞: https://blog.stackblitz.com/tags/vite/
本文鏈接：http://www.tebozhan.com/showinfo-26-92109-0.htmlVite 是什么(并且為什么如此流行）？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號