Mám v plánu spustit hackathon v mé společnosti a jako technický vedoucí týmu jsem byl požádán, abych vybral technologický stack, který budeme používat pro naši aplikaci.
Moje okamžitá odpověď byla, že chci, abychom vyzkoušeli použití Vite pro frontendovou část poté, co jsem ji chvíli sledoval a provedl jsem o ní nějaký průzkum.
V tomto příspěvku bych se s vámi rád podělil o některé funkce, které Vite nabízí, a ukázal trochu, jak funguje.
Vite
Vite vytvořil Evan You (stejný člověk, který vytvořil VueJS) a zdá se, že s Vite použil stejný vzor jako s VueJS - Jednoduchý, inovativní, učí se z chyb ostatních a stará se o mnoho konfigurací ve výchozím nastavení ALE v případě, že potřebujete jít hlouběji a upravit některý z nich - můžete to udělat docela snadno.
Některé z těchto konfigurací, které Vite poskytuje, jsou - JSX, TypeScript, Web Workers, CSS a další.
Na rozdíl od jiných sdružovacích nástrojů používá Vite při vývoji i výrobě pouze moduly ES – Podívejme se, jak:
Vývoj
Vite provozuje Koa – lehký vývojový server, který obsluhuje nativní moduly ES a používá esbuild pro předběžné sdružování závislostí.
Co je předbundling závislostí?
Podle Vite's Docs má předsvazování dva důvody:
1) Kompatibilita CommonJS a UMD - Zatímco Vite používá pouze nativní moduly ES, některé z knihoven, které používáte nebo které byste mohli používat, nebudou používat moduly ES, místo toho budou používat CommonJS nebo UMD. K vyřešení tohoto problému Vite převádí všechny závislosti z CommonJS a UMD do modulů ES pomocí esbuild .
Vite tuto akci provádí při prvním spuštění dev serveru (proto může být první spuštění delší než ostatní spuštění).
Co když přidám novou závislost nebo upgraduji verzi existující? Není problém – Vite bude sledovat změny v package.json / package-lock.json / yarn.lock / pnpm-lock.yaml a obnoví závislost. V případě problémů můžete smazat mezipaměť node_modules/.vite nebo znovu spusťte server s --force flag a Vite znovu sestaví všechny závislosti.
2) Výkon – Každá závislost může mít velký počet svých vlastních modulů, což způsobí, že prohlížeč spustí šílené množství požadavků na backend, takže Vite tyto závislosti převádí do jediného modulu ES, aby se snížilo množství spouštěných požadavků.
Spuštění dev serveru
Spustíme server:
Nyní to porovnejme s vue-cli (webpack):
Jak můžete vidět, Vite je rychlejší v obou jízdách. Otázka ale zní – Jak? (Odpověď na tuto otázku dostaneme později)
Nativní moduly ES
Jak jsem již zmínil dříve, Vite používá pouze moduly ES. Když se podíváme na index.html soubor, uvidíme tento řádek:
<script type="module" src="/src/main.js"></script>
type="module" atribut je funkce ES6, která používá nativní moduly ES. Všechny moderní prohlížeče již tuto funkci podporují.
Obrázek výše ukazuje efekt 'Vodopád', který moduly ES vytvářejí - počínaje main.js a import všech modulů do stromu modulů. A jak můžete vidět, každá komponenta a závislost vue je rozdělena do samostatného modulu.
Na rozdíl od vue-cli (webpack), který má ve výchozím nastavení pouze 2 skripty:
app.js obsahující všechny součásti aplikace.
chunk-vendors.js je v podstatě celý node_modules závislosti.
webpack má způsob, jak rozdělit komponenty a závislosti na bloky, ale vyžaduje, abyste tuto možnost nakonfigurovali NEBO ručně vybrali soubory/moduly, které chcete rozdělit.
Další zajímavostí je, že každý soubor komponenty vue má také soubor css, který se načítá - Proč? HMR.
HMR
Výměna horkého modulu Vite je jedním z hlavních důvodů, proč je Vite tak rychlý. Využívá web-socket stejně jako webpack a další sdružovací nástroje, ale rozdíl je v tom, že s kombinací ESM funguje velmi rychle, i když vaše aplikace poroste výměnou pouze 1 modulu a nesdružováním velkého souboru.
Vezměme si jako příklad vue-cli (webpack):
Ve výchozím nastavení má pouze 2 soubory (jak je uvedeno výše), na každém HMR volání celé app.js budou znovu seskupeny a odeslány do prohlížeče.
Kde je problém?
Když se množství komponent začne zvětšovat, tak i app.js velikost a čas, který to trvá.
Na druhé straně s Vite to bude mnohem rychlejší, protože není potřeba znovu sdružovat tak velký soubor - nahradí pouze skutečnou komponentu / soubor, který byl změněn, aniž by se „dotýkal“ ostatních komponent / souborů. Proto existuje také soubor css, o kterém jsme se zmínili dříve - Pokud chcete provést změnu pouze v <style> komponenty - pak pouze <style> této složky bude nahrazeno HMR a ne celá složka.
Znamená to tedy, že pokud vaše aplikace bude mít 1 nebo 1000 nebo 10000 komponent, čas, který proces HMR zabere, zůstane téměř stejný (samozřejmě také v závislosti na velikosti souboru, jen se vyhněte vytváření komponent velikosti monster. .).
Výroba
Pro výrobu Vite stále sdružuje kód podle oficiálních dokumentů:
Skvělý efekt „vodopádu“, který jste viděli výše, je opravdu rychlý a užitečný, když pracujete s dev serverem na vašem localhostu, ale tato výhoda se může stát nevýhodou, pokud jde o výkon načítání.
Pro produkční sdružování Vite používá rollup.js, který také používá ESM při vytváření aplikace pro produkci a dělá to rychleji a s menší velikostí souboru než například webpack.
Nevýhody
Vite není dokonalý a má také své nevýhody:
1. Staré prohlížeče podporují - Staré prohlížeče (IE) nepodporují ESM, proto tam aplikace vytvořené Vite nebudou fungovat.
2. Různá vývojová a produkční sestavení – Jak jste viděli, Vite používá různé nástroje pro vývoj a výrobu, což má možnost způsobit problémy a chyby, které se objeví pouze v jednom z prostředí, ale ne ve druhém.
3. Ekosystém – Vite je v sousedství stále nový a ekosystém je stále malý. Existují problémy/chyby/problémy, které se pravděpodobně objeví v blízké i vzdálené budoucnosti a které bude třeba vyřešit, zatímco například webpack má docela velký ekosystém, který řeší širokou škálu okrajových případů.
Mám tedy přestat používat vue-cli nebo webpack a přejít na Vite?
No, je to na vás. Moje rada - Nejprve to vyzkoušejte, otestujte, vytvořte si malou demo aplikaci -> pak, pokud chcete začít pracovat na skutečném projektu, zvažte výhody a nevýhody, které jsem uvedl výše - a pak se rozhodněte.
Podpora knihoven a rámců
V tomto příspěvku jsem ukázal všechny příklady s VueJS, ale Vite podporuje i další knihovny a rámce:
VueJs, React, Preact, Svelte, LitElement. (A pravděpodobně se přidají další)
Souhrn
Vite se zdá být opravdu dobrým a slibným nástrojem pro vytváření s pěknými funkcemi, novějšími technologiemi a alternativou k jiným nástrojům pro vytváření.
Není to dokonalé (jako každá věc v našem světě...), takže si myslím, že byste to měli zkusit, a i když to nebude vyhovovat vašim potřebám, doporučuji vám, abyste to sledovali a sledovali, jak se to bude vyvíjet, a možná pak zvážit zkuste to znovu.
Doufám, že tento příspěvek trochu usnadnil pochopení Vite.
Děkuji za přečtení :)