Vite jest nowoczesnym narz\u0119dziem, kt\u00f3re stara si\u0119 rozwi\u0105za\u0107 opisane wy\u017cej problemy, wykorzystuj\u0105c najnowsze osi\u0105gni\u0119cia w ekosystemie JavaScript. Nale\u017c\u0105 do nich natywne modu\u0142y ES w przegl\u0105darkach oraz narz\u0119dzia napisane w j\u0119zykach kompilowanych do kodu maszynowego, np. Go.<\/p>\n\n\n\n
Vite umo\u017cliwia b\u0142yskawiczne uruchamianie serwer\u00f3w deweloperskich oraz szybkie aktualizacje modu\u0142\u00f3w, niezale\u017cnie od wielko\u015bci aplikacji. Dzi\u0119ki tym innowacjom, Vite staje si\u0119 niezast\u0105pionym narz\u0119dziem w pracy nowoczesnych programist\u00f3w frontendowych.<\/p>\n\n\n\n
Czego potrzebujemy, aby zacz\u0105\u0107 prac\u0119 z Vite?<\/strong><\/h2>\n\n\n\nZacznijmy od przygotowania naszego \u015brodowiska do pracy z Vite w wersji 5. B\u0119d\u0105 nam potrzebne:<\/p>\n\n\n\n
\n- node.js w wersji 18+,<\/li>\n\n\n\n
- npm (node package manager) do odpalenia skrypt\u00f3w (lub yarn, bun).<\/li>\n<\/ul>\n\n\n\n
Aby sprawdzi\u0107, czy posiadacie zainstalowane oprogramowanie na swoim sprz\u0119cie, odpalcie kolejno:<\/p>\n\n\n\n![\"node](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image1-2.png\")
<\/a><\/figure>\n\n\n\nJe\u015bli jednak go nie posiadacie, w prosty spos\u00f3b mo\u017cecie je zainstalowa\u0107 na swojej maszynie.<\/p>\n\n\n\n
Tworzenie nowego projektu<\/strong><\/h2>\n\n\n\nAby stworzy\u0107 nowy projekt, otw\u00f3rzmy terminal, a nast\u0119pnie:<\/p>\n\n\n\n
\n- W\u0142\u0105cz poni\u017csz\u0105 komend\u0119 w celu rozpocz\u0119cia tworzenia projektu.<\/li>\n<\/ol>\n\n\n\n
![\"npm](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image2-4-1024x28.png\")
<\/a><\/figure>\n\n\n\n\n- Opcjonalnie mo\u017ce wyskoczy\u0107 pytanie o instalacj\u0119 paczek \u2013 wpisujemy \u201ey\u201d i klikamy enter.<\/li>\n\n\n\n
- Wpisujemy nazw\u0119 naszego projektu i go zatwierdzamy, klikaj\u0105c enter.<\/li>\n<\/ol>\n\n\n\n
![\"Select](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image3-3-1024x245.png\")
<\/a><\/figure>\n\n\n\n\n- Wybieramy technologi\u0119, w jakiej chcemy tworzy\u0107 nasz\u0105 aplikacj\u0119.<\/li>\n\n\n\n
- Po wybraniu technologii czas na zmian\u0119 ewentualnego wariantu, czyli w naszym przypadku j\u0119zyka, w kt\u00f3rym b\u0119dziemy tworzy\u0107 aplikacj\u0119:<\/li>\n<\/ol>\n\n\n\n
![\"Select](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image4-3-1024x161.png\")
<\/a><\/figure>\n\n\n\n\n- Po zainstalowaniu paczek wykonujemy poni\u017cszy skrypt, kt\u00f3ry pozwala nam wej\u015b\u0107 do projektu, zainstalowa\u0107 paczki oraz odpali\u0107 serwer:<\/li>\n<\/ol>\n\n\n\n
![\"cd](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image5-4.png\")
<\/a><\/figure>\n\n\n\n![\"npm](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/Obraz1.png\")
<\/a><\/figure>\n\n\n\n![\"npm](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/Obraz2.png\")
<\/a><\/figure>\n\n\n\n![\"VITE](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image8-2-1024x111.png\")
<\/a><\/figure>\n\n\n\nPo kilku sekundach dostaniemy informacje, na jakim porcie dzia\u0142a nasza aplikacja.<\/p>\n\n\n\n
Co oferuje Vite?<\/strong><\/h2>\n\n\n\nWiemy ju\u017c, jak postawi\u0107 swoja pierwsz\u0105 aplikacj\u0119 z u\u017cyciem Vite. Przyszed\u0142 czas na poznanie funkcjonalno\u015bci, jakie narz\u0119dzie nam oferuje.<\/p>\n\n\n\n
Hot Module Replacement (HMR)<\/strong><\/h3>\n\n\n\nVite dostarcza API do HMR oparte na natywnym ESM. Dzi\u0119ki temu projekty z wbudowan\u0105 obs\u0142ug\u0105 HMR mog\u0105 oferowa\u0107 natychmiastowe i precyzyjne aktualizacje bez prze\u0142adowania strony, co pozwala na zachowanie stanu aplikacji oraz przyspieszony development.<\/p>\n\n\n\n
Jakie s\u0105 zalety HMR<\/strong> w Vite na tle Webpack? Nale\u017c\u0105 do nich:<\/p>\n\n\n\n\n- Szybko\u015b\u0107 \u2013 Vite wykorzystuje esbuild do transformacji i budowania zale\u017cno\u015bci, co jest znacznie szybsze ni\u017c tradycyjne narz\u0119dzia bundlingowe oparte na JavaScript.<\/li>\n\n\n\n
- Natywne ES modules \u2013 Vite korzysta z natywnych ES Modules obs\u0142ugiwanych bezpo\u015brednio przez przegl\u0105darki, co eliminuje potrzeb\u0119 dodatkowego bundlingu i pozwala na bardziej efektywne zarz\u0105dzanie zale\u017cno\u015bciami.<\/li>\n\n\n\n
- Zapami\u0119tanie stanu \u2013 HMR w Vite pozwala na zachowanie aktualnego stanu aplikacji podczas wymiany modu\u0142\u00f3w, co jest kluczowe dla efektywnego i szybkiego debugowania oraz developmentu.<\/li>\n\n\n\n
- Prostota i wygoda \u2013 Vite automatycznie konfiguruje HMR dla popularnych framework\u00f3w, co upraszcza proces tworzenia nowych projekt\u00f3w.<\/li>\n<\/ul>\n\n\n\n
Pre-building i NPM dependencies<\/strong><\/h3>\n\n\n\nNatywne ES importy nie wspieraj\u0105 popularnych w wi\u0119kszo\u015bci projekt\u00f3w import\u00f3w modu\u0142\u00f3w. Z racji tego, \u017ce taki zapis spowodowa\u0142by b\u0142\u0105d w przegl\u0105darce, Vite wyszukuje wszystkie takie importy i wykonuje nast\u0119puj\u0105ce czynno\u015bci:<\/p>\n\n\n\n
\n- Wst\u0119pny bundling \u2013 w celu przyspieszenia strony konwertuje modu\u0142y CommonJS do ESM. Proces ten jest realizowany za pomoc\u0105 esbuild<\/a> bundlera, co znacz\u0105co przyspiesza start aplikacji.<\/li>\n\n\n\n
- Przepisuje importy na URL-e, cytuj\u0105c przyk\u0142ad z dokumentacji: \u201e\/node_modules\/.vite\/deps\/my-dep.js?v=f3sf2ebd\u201d,<\/em> <\/strong>co pozwala przegl\u0105darce na zaimportowanie pliku.<\/li>\n<\/ol>\n\n\n\n
Dodatkowo, w celu przyspieszenia tego procesu, Vite u\u017cywa cache do zapami\u0119tania ju\u017c wcze\u015bniej zaimportowanych plik\u00f3w, przez co nie musi ponownie ich pobiera\u0107 z serwera.<\/p>\n\n\n\n
Transpilacja kodu TypeScript<\/strong><\/h3>\n\n\n\nVite przetwarza pliki .ts poprzez transpilacj\u0119, ale nie wykonuje sprawdzania typ\u00f3w. Narz\u0119dzie zak\u0142ada, \u017ce sprawdzanie typ\u00f3w jest obs\u0142ugiwane przez IDE i proces budowania projektu.<\/p>\n\n\n\n
Dlaczego Vite nie sprawdza typ\u00f3w? Transpilacja i sprawdzanie typ\u00f3w to dwa r\u00f3\u017cne procesy:<\/p>\n\n\n\n
\n- Transpilacja \u2013 przetwarza ka\u017cdy plik osobno, co idealnie pasuje do modelu kompilacji na \u017c\u0105danie w Vite.<\/li>\n\n\n\n
- Sprawdzanie typ\u00f3w \u2013 wymaga analizy ca\u0142ego grafu modu\u0142\u00f3w, co spowolni\u0142oby Vite.<\/li>\n<\/ul>\n\n\n\n
Vite koncentruje si\u0119 na szybkim przetwarzaniu modu\u0142\u00f3w, aby mog\u0142y dzia\u0142a\u0107 w przegl\u0105darce jak najszybciej. Dlatego zalecam oddzielne uruchamianie narz\u0119dzi do analizy statycznej, takich jak ESLint.<\/p>\n\n\n\n
Pozosta\u0142e funkcjonalno\u015bci<\/strong><\/h2>\n\n\n\nWspomnia\u0142em ju\u017c o najwa\u017cniejszych kwestiach, kt\u00f3re pozwalaj\u0105 Vite wyr\u00f3\u017cnia\u0107 si\u0119 na tle konkurencji swoj\u0105 szybko\u015bci\u0105. Warto napomkn\u0105\u0107 o innych zaletach, kt\u00f3re, podobnie jak w innych narz\u0119dziach takich jak np. Webpack, s\u0105 tak\u017ce wspierane.<\/p>\n\n\n\n
JSON import <\/strong><\/h3>\n\n\n\nPliki JSON mog\u0105 by\u0107 bezpo\u015brednio pobierane do naszego pliku oraz wykorzystane w kodzie.<\/p>\n\n\n\n
Statyczne assety<\/strong><\/h3>\n\n\n\nImportowanie statycznych asset\u00f3w spowoduje zwr\u00f3cenie adresu URL po jego udost\u0119pnieniu.<\/p>\n\n\n\n
Dynamiczne importy<\/strong><\/h3>\n\n\n\nVite, opr\u00f3cz importu globalnego, umo\u017cliwia r\u00f3wnie\u017c dynamiczny import z wykorzystaniem zmiennych. Jest to funkcjonalno\u015b\u0107 podobna do importu globalnego, ale dzia\u0142a w nieco inny spos\u00f3b. Nale\u017cy pami\u0119ta\u0107, \u017ce zmienne u\u017cywane w dynamicznym imporcie reprezentuj\u0105 nazwy plik\u00f3w tylko na jednym poziomie g\u0142\u0119boko\u015bci struktury katalog\u00f3w. Oznacza to, \u017ce je\u015bli zmienna zawiera \u015bcie\u017ck\u0119 do pliku w podkatalogu, import nie powiedzie si\u0119.<\/p>\n\n\n\n
W przypadku bardziej z\u0142o\u017conych scenariuszy, wymagaj\u0105cych dost\u0119pu do plik\u00f3w w g\u0142\u0119bszych strukturach katalog\u00f3w, zaleca si\u0119 korzystanie z funkcji importu globalnego. Ta metoda oferuje wi\u0119ksze mo\u017cliwo\u015bci i elastyczno\u015b\u0107 w zarz\u0105dzaniu importami w bardziej rozbudowanych projektach.<\/p>\n\n\n\n
CSS<\/strong><\/h3>\n\n\n\nVite pozwala na pobieranie plik\u00f3w css i wstrzykiwanie ich w tag styles, co pozwala na wykorzystanie HMR i przyspieszenie budowania aplikacji. Dodatkowo, Vite wspiera ca\u0142\u0105 gam\u0119 technologii i sposob\u00f3w pisania styli, takich jak css modules, PostCSS czy pre-procesory.<\/p>\n\n\n\n
Pluginy<\/strong><\/h3>\n\n\n\nTak jak Webpack, Vite umo\u017cliwia rozbudow\u0119 jego funkcjonalno\u015bci o dodatkowe pluginy. Bazuj\u0105 one na Rollup, dzi\u0119ki czemu developerzy mog\u0105 korzysta\u0107 z bogatego ekosystemu gotowych rozwi\u0105za\u0144. Przyk\u0142adowo, dzi\u0119ki plugin mo\u017cemy zwi\u0119kszy\u0107 funkcjonalno\u015b\u0107 serwera deweloperskiego lub wprowadzi\u0107 SSR w naszym projekcie.<\/p>\n\n\n\n
Poni\u017cej znajduje si\u0119 przyk\u0142adowy kawa\u0142ek kodu, kt\u00f3ry za pomoc\u0105 pluginu o nazwie vite-plugin-ssr\/plugin <\/em>umo\u017cliwia <\/em>implementacj\u0119 SSR w naszym projekcie:<\/p>\n\n\n\n![\"import\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image9-3-1024x144.png\")
<\/a><\/figure>\n\n\n\nJak wida\u0107, dodanie obs\u0142ugi SSR w projekcie by\u0142o proste jak nigdy dot\u0105d.<\/p>\n\n\n\n
Wydajno\u015b\u0107<\/strong><\/h2>\n\n\n\nVite jest narz\u0119dziem, kt\u00f3re od razu zajmie si\u0119 wydajno\u015bci\u0105 aplikacji. Jednak w zwi\u0105zku z tym, jak szybko rosn\u0105 wymagania projektu, warto zwr\u00f3ci\u0107 uwag\u0119 na kilka kwestii.<\/p>\n\n\n\n
Na potrzeby tego artyku\u0142u zaczerpnijmy troch\u0119 informacji z wpisu innego programisty: Is Vite Really Faster Than Webpack?<\/a>. Interesuje nas aplikacja, jak\u0105 stworzy\u0142 i zamie\u015bci\u0142 na GitHub<\/a>. <\/strong> Przygotowa\u0142 on mini projekt, kt\u00f3ry por\u00f3wnuje czas budowania aplikacji oraz \u0142adowania w przegl\u0105darce w zale\u017cno\u015bci od tego, czy u\u017cyjemy Vite, czy Webpack. Zestawia tak\u017ce, ile komponent\u00f3w znajduje si\u0119 w naszej aplikacji. <\/p>\n\n\n\nPoni\u017cej za\u0142\u0105czam zdj\u0119cie dodane przez autora.<\/p>\n\n\n\n![\"Por\u00f3wnanie](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image10-2-1024x793.png\")
<\/a>Ryc. 1 Por\u00f3wnanie Vite i Webpack<\/a><\/figcaption><\/figure>\n\n\n\nJak wida\u0107, Vite ma spor\u0105 przewag\u0119, przynajmniej na pocz\u0105tku. Kiedy jednak liczba komponent\u00f3w wzrasta, czas \u0142adowania aplikacji w przegl\u0105darce wyd\u0142u\u017ca si\u0119 znacz\u0105co na korzy\u015b\u0107 Webpacka. Autor tego wpisu zaproponowa\u0142 u\u017cycie lazy loadingu jako rozwi\u0105zanie problemu czasu \u0142adowania.<\/p>\n\n\n\n
Po implementacji pr\u0119dko\u015b\u0107 budowania oraz \u0142adowania aplikacji drastycznie spad\u0142a, co nie powinno nikogo dziwi\u0107, lecz znowu Vite okaza\u0142 si\u0119 by\u0107 szybszy od Webpacka.<\/p>\n\n\n\n
Inne wskaz\u00f3wki<\/strong><\/h2>\n\n\n\nCo jeszcze mo\u017ce wp\u0142ywa\u0107 mi\u0119dzy innymi na pr\u0119dko\u015b\u0107 startu serwera, \u0142adowania strony lub budowy aplikacji?<\/p>\n\n\n\n
Ostro\u017cne dobieranie plugin\u00f3w<\/strong><\/h3>\n\n\n\nVite umo\u017cliwia wykorzystanie w konfiguracji plugin\u00f3w dostarczonych przez spo\u0142eczno\u015b\u0107, kt\u00f3ra tworzy swoje w\u0142asne rozwi\u0105zania w miar\u0119 potrzeb. I o ile w wielu przypadkach mog\u0105 nam u\u0142atwi\u0107 prac\u0119, pozostaj\u0105 one poza kontrol\u0105 oficjalnych tw\u00f3rc\u00f3w technologii.<\/p>\n\n\n\n
Tw\u00f3rcy doradzaj\u0105, aby przy wyborze pluginu sugerowa\u0107 si\u0119 mi\u0119dzy innymi tym, aby:<\/p>\n\n\n\n
\n- du\u017ce zale\u017cno\u015bci, kt\u00f3re s\u0105 rzadko u\u017cywane, powinny by\u0107 importowane dynamicznie, \u017ceby skr\u00f3ci\u0107 czas uruchamiania Node.js,<\/li>\n\n\n\n
- unika\u0107 wykonywania d\u0142ugotrwa\u0142ych operacji w hookach buildStart, config i configResolved, poniewa\u017c op\u00f3\u017aniaj\u0105 one uruchomienie serwera deweloperskiego.<\/li>\n<\/ul>\n\n\n\n
Unikaj barrel files<\/strong><\/h3>\n\n\n\nCzym jest barrel files? Jest to spos\u00f3b na eksportowanie naszego kodu, kt\u00f3ry znajduje si\u0119 w katalogu, w pliku index.js. Przyk\u0142ad:<\/p>\n\n\n\n![\"\/\/index.ts\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/image11-3-1024x149.png\")
<\/a><\/figure>\n\n\n\nPrzy importowaniu metody helper1, pobieramy tak\u017ce dwie pozosta\u0142e metody, kt\u00f3re nie tylko zajmuj\u0105 miejsce w pami\u0119ci, ale te\u017c mog\u0105 zawiera\u0107 side efects. Podsumowuj\u0105c, pobieramy kod, kt\u00f3rego nie potrzebujemy, a mo\u017ce nam zmniejszy\u0107 performance.<\/p>\n\n\n\n
Zarz\u0105dzanie stylami <\/strong><\/h3>\n\n\n\nKolejnym sposobem, jaki tw\u00f3rcy polecaj\u0105 w celu zwi\u0119kszenie wydajno\u015bci, jest korzystanie z natywnych rozwi\u0105za\u0144 przy stalowaniu i dodawaniu grafik. Zalecaj\u0105:<\/p>\n\n\n\n
\n- u\u017cywanie CSS zamiast pr\u0119-procesor\u00f3w tam, gdzie jest to mo\u017cliwe; do zagnie\u017cd\u017cania przyda si\u0119 PostCss,<\/li>\n\n\n\n
- nieimportowanie SVG jako komponent\u00f3w; zamiast tego korzystaj z nich jako string lub importuj poprzez URL,<\/li>\n\n\n\n
- unikania konfigurowania Babel, kiedy u\u017cywasz pluginu vitejs\/plugin-react, kt\u00f3ry pomaga w pracy z React,<\/li>\n\n\n\n
- wykorzystywanie parsera LightningCSS do stalowania.<\/li>\n<\/ul>\n\n\n\n
Sprecyzuj rozszerzenie pliku, jaki chcesz importowa\u0107<\/strong><\/h3>\n\n\n\nZ perspektywy wydajno\u015bci importowanie plik\u00f3w dla Vite r\u00f3wnie\u017c mo\u017ce by\u0107 bardzo istotne. Chodzi tutaj o rozszerzenie pliku, jakiego szukamy. Vite pozwala na importowanie plik\u00f3w bez podania ich rozszerzenia. W jaki spos\u00f3b si\u0119 to odbywa? Kiedy importujemy plik, np.: \u201eTest.tsx\u201d pod \u015bcie\u017ck\u0105 \u201e.\/components\/Test\u201d, Vite zaczyna szuka\u0107 wskazanego pliku w nast\u0119puj\u0105cej kolejno\u015bci.<\/p>\n\n\n\n
\n- Test<\/li>\n\n\n\n
- Test.mjs<\/li>\n\n\n\n
- Test.js<\/li>\n\n\n\n
- Test.mts<\/li>\n\n\n\n
- Test.ts<\/li>\n\n\n\n
- Test.jsx<\/li>\n\n\n\n
- Test.tsx<\/li>\n\n\n\n
- Test.json<\/li>\n<\/ol>\n\n\n\n
Jak wida\u0107, je\u015bli chcieliby\u015bmy importowa\u0107 plik JSON, Vite musi przej\u015b\u0107 kilka krok\u00f3w sprawdzaj\u0105cych czy nasz plik w danym folderze si\u0119 znajduje. Zamiast tego, zaleca si\u0119 importowa\u0107\u00a0plik wraz z rozszerzeniem \u2013 w naszym przypadku b\u0119dzie to \u201e.\/components\/Test.tsx\u201d.<\/p>\n\n\n\n
Podsumowanie<\/strong><\/h2>\n\n\n\nZd\u0105\u017cyli\u015bmy ju\u017c pozna\u0107 podstawowe zalety Vite. Naturalne pytanie, kt\u00f3re nasuwa si\u0119 ka\u017cdemu programi\u015bcie, brzmi: Czy Vite jest w stanie zast\u0105pi\u0107 Webpacka?<\/strong> Jak zawsze, najlepsz\u0105 odpowiedzi\u0105 b\u0119dzie: \u201eto zale\u017cy\u201d \ud83d\ude09<\/p>\n\n\n\nNa pewno by\u0142oby kusz\u0105c\u0105 wizj\u0105, aby nowy projekt, kt\u00f3ry w\u0142a\u015bnie startujemy, postawi\u0107 za pomoc\u0105 Vite. Niestety, \u017cycie programisty to nie bajka i nie ka\u017cdy ma to szcz\u0119\u015bcie, \u017ce zaczyna projekt od zera. Bardzo cz\u0119sto musimy mierzy\u0107 si\u0119 z starszymi projektami, gdzie wiele paczek jest skonfigurowana pod stabilne, u\u017cywane od wielu lat narz\u0119dzie, jakim jest Webpack. Przepisywanie aplikacji pod Vite by\u0142o by zapewne bardzo problematyczne.<\/p>\n\n\n\n
Je\u015bli jednak jeste\u015b osob\u0105 pocz\u0105tkuj\u0105ca w \u015bwiecie IT lub startuje z nowy projekt, to Vite wydaje si\u0119 ciekawym narz\u0119dziem do przetestowania. Jest proste w konfiguracji, HMR to bajeczne rozwi\u0105zanie, kt\u00f3re przyspiesza prac\u0119, a start projektu wi\u0105\u017ce si\u0119 z kilkoma krokami, kt\u00f3re musimy wyklika\u0107 w konsoli i\u2026 voil\u00e0, mo\u017cemy przej\u015b\u0107 do developmentu.<\/p>\n\n\n\n
Warto obserwowa\u0107, co b\u0119dzie dzia\u0142o si\u0119 z t\u0105 technologi\u0105, poniewa\u017c potencja\u0142 ma ogromny, cho\u0107 uzale\u017cniony od liczby os\u00f3b, kt\u00f3re b\u0119d\u0105 z niej korzysta\u0107 oraz rozwija\u0107 Vite wraz z pluginami u\u0142atwiaj\u0105cymi prac\u0119. Gor\u0105co Was zach\u0119cam do zapoznania si\u0119 z t\u0105 technologi\u0105 \ud83d\ude0a<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuj\u0105 Ci\u0119 narz\u0119dzia wykorzystywane w IT, zajrzyj koniecznie r\u00f3wnie\u017c do innych artyku\u0142\u00f3w naszych ekspert\u00f3w<\/a>. <\/p>\n\n\n
Aby sprawdzi\u0107, czy posiadacie zainstalowane oprogramowanie na swoim sprz\u0119cie, odpalcie kolejno:<\/p>\n\n\n\n Je\u015bli jednak go nie posiadacie, w prosty spos\u00f3b mo\u017cecie je zainstalowa\u0107 na swojej maszynie.<\/p>\n\n\n\n Aby stworzy\u0107 nowy projekt, otw\u00f3rzmy terminal, a nast\u0119pnie:<\/p>\n\n\n\n Po kilku sekundach dostaniemy informacje, na jakim porcie dzia\u0142a nasza aplikacja.<\/p>\n\n\n\n Wiemy ju\u017c, jak postawi\u0107 swoja pierwsz\u0105 aplikacj\u0119 z u\u017cyciem Vite. Przyszed\u0142 czas na poznanie funkcjonalno\u015bci, jakie narz\u0119dzie nam oferuje.<\/p>\n\n\n\n Vite dostarcza API do HMR oparte na natywnym ESM. Dzi\u0119ki temu projekty z wbudowan\u0105 obs\u0142ug\u0105 HMR mog\u0105 oferowa\u0107 natychmiastowe i precyzyjne aktualizacje bez prze\u0142adowania strony, co pozwala na zachowanie stanu aplikacji oraz przyspieszony development.<\/p>\n\n\n\n Jakie s\u0105 zalety HMR<\/strong> w Vite na tle Webpack? Nale\u017c\u0105 do nich:<\/p>\n\n\n\n Natywne ES importy nie wspieraj\u0105 popularnych w wi\u0119kszo\u015bci projekt\u00f3w import\u00f3w modu\u0142\u00f3w. Z racji tego, \u017ce taki zapis spowodowa\u0142by b\u0142\u0105d w przegl\u0105darce, Vite wyszukuje wszystkie takie importy i wykonuje nast\u0119puj\u0105ce czynno\u015bci:<\/p>\n\n\n\n Dodatkowo, w celu przyspieszenia tego procesu, Vite u\u017cywa cache do zapami\u0119tania ju\u017c wcze\u015bniej zaimportowanych plik\u00f3w, przez co nie musi ponownie ich pobiera\u0107 z serwera.<\/p>\n\n\n\n Vite przetwarza pliki .ts poprzez transpilacj\u0119, ale nie wykonuje sprawdzania typ\u00f3w. Narz\u0119dzie zak\u0142ada, \u017ce sprawdzanie typ\u00f3w jest obs\u0142ugiwane przez IDE i proces budowania projektu.<\/p>\n\n\n\n Dlaczego Vite nie sprawdza typ\u00f3w? Transpilacja i sprawdzanie typ\u00f3w to dwa r\u00f3\u017cne procesy:<\/p>\n\n\n\n Vite koncentruje si\u0119 na szybkim przetwarzaniu modu\u0142\u00f3w, aby mog\u0142y dzia\u0142a\u0107 w przegl\u0105darce jak najszybciej. Dlatego zalecam oddzielne uruchamianie narz\u0119dzi do analizy statycznej, takich jak ESLint.<\/p>\n\n\n\n Wspomnia\u0142em ju\u017c o najwa\u017cniejszych kwestiach, kt\u00f3re pozwalaj\u0105 Vite wyr\u00f3\u017cnia\u0107 si\u0119 na tle konkurencji swoj\u0105 szybko\u015bci\u0105. Warto napomkn\u0105\u0107 o innych zaletach, kt\u00f3re, podobnie jak w innych narz\u0119dziach takich jak np. Webpack, s\u0105 tak\u017ce wspierane.<\/p>\n\n\n\n Pliki JSON mog\u0105 by\u0107 bezpo\u015brednio pobierane do naszego pliku oraz wykorzystane w kodzie.<\/p>\n\n\n\n Importowanie statycznych asset\u00f3w spowoduje zwr\u00f3cenie adresu URL po jego udost\u0119pnieniu.<\/p>\n\n\n\n Vite, opr\u00f3cz importu globalnego, umo\u017cliwia r\u00f3wnie\u017c dynamiczny import z wykorzystaniem zmiennych. Jest to funkcjonalno\u015b\u0107 podobna do importu globalnego, ale dzia\u0142a w nieco inny spos\u00f3b. Nale\u017cy pami\u0119ta\u0107, \u017ce zmienne u\u017cywane w dynamicznym imporcie reprezentuj\u0105 nazwy plik\u00f3w tylko na jednym poziomie g\u0142\u0119boko\u015bci struktury katalog\u00f3w. Oznacza to, \u017ce je\u015bli zmienna zawiera \u015bcie\u017ck\u0119 do pliku w podkatalogu, import nie powiedzie si\u0119.<\/p>\n\n\n\n W przypadku bardziej z\u0142o\u017conych scenariuszy, wymagaj\u0105cych dost\u0119pu do plik\u00f3w w g\u0142\u0119bszych strukturach katalog\u00f3w, zaleca si\u0119 korzystanie z funkcji importu globalnego. Ta metoda oferuje wi\u0119ksze mo\u017cliwo\u015bci i elastyczno\u015b\u0107 w zarz\u0105dzaniu importami w bardziej rozbudowanych projektach.<\/p>\n\n\n\n Vite pozwala na pobieranie plik\u00f3w css i wstrzykiwanie ich w tag styles, co pozwala na wykorzystanie HMR i przyspieszenie budowania aplikacji. Dodatkowo, Vite wspiera ca\u0142\u0105 gam\u0119 technologii i sposob\u00f3w pisania styli, takich jak css modules, PostCSS czy pre-procesory.<\/p>\n\n\n\n Tak jak Webpack, Vite umo\u017cliwia rozbudow\u0119 jego funkcjonalno\u015bci o dodatkowe pluginy. Bazuj\u0105 one na Rollup, dzi\u0119ki czemu developerzy mog\u0105 korzysta\u0107 z bogatego ekosystemu gotowych rozwi\u0105za\u0144. Przyk\u0142adowo, dzi\u0119ki plugin mo\u017cemy zwi\u0119kszy\u0107 funkcjonalno\u015b\u0107 serwera deweloperskiego lub wprowadzi\u0107 SSR w naszym projekcie.<\/p>\n\n\n\n Poni\u017cej znajduje si\u0119 przyk\u0142adowy kawa\u0142ek kodu, kt\u00f3ry za pomoc\u0105 pluginu o nazwie vite-plugin-ssr\/plugin <\/em>umo\u017cliwia <\/em>implementacj\u0119 SSR w naszym projekcie:<\/p>\n\n\n\n Jak wida\u0107, dodanie obs\u0142ugi SSR w projekcie by\u0142o proste jak nigdy dot\u0105d.<\/p>\n\n\n\n Vite jest narz\u0119dziem, kt\u00f3re od razu zajmie si\u0119 wydajno\u015bci\u0105 aplikacji. Jednak w zwi\u0105zku z tym, jak szybko rosn\u0105 wymagania projektu, warto zwr\u00f3ci\u0107 uwag\u0119 na kilka kwestii.<\/p>\n\n\n\n Na potrzeby tego artyku\u0142u zaczerpnijmy troch\u0119 informacji z wpisu innego programisty: Is Vite Really Faster Than Webpack?<\/a>. Interesuje nas aplikacja, jak\u0105 stworzy\u0142 i zamie\u015bci\u0142 na GitHub<\/a>. <\/strong> Przygotowa\u0142 on mini projekt, kt\u00f3ry por\u00f3wnuje czas budowania aplikacji oraz \u0142adowania w przegl\u0105darce w zale\u017cno\u015bci od tego, czy u\u017cyjemy Vite, czy Webpack. Zestawia tak\u017ce, ile komponent\u00f3w znajduje si\u0119 w naszej aplikacji. <\/p>\n\n\n\n Poni\u017cej za\u0142\u0105czam zdj\u0119cie dodane przez autora.<\/p>\n\n\n\n Jak wida\u0107, Vite ma spor\u0105 przewag\u0119, przynajmniej na pocz\u0105tku. Kiedy jednak liczba komponent\u00f3w wzrasta, czas \u0142adowania aplikacji w przegl\u0105darce wyd\u0142u\u017ca si\u0119 znacz\u0105co na korzy\u015b\u0107 Webpacka. Autor tego wpisu zaproponowa\u0142 u\u017cycie lazy loadingu jako rozwi\u0105zanie problemu czasu \u0142adowania.<\/p>\n\n\n\n Po implementacji pr\u0119dko\u015b\u0107 budowania oraz \u0142adowania aplikacji drastycznie spad\u0142a, co nie powinno nikogo dziwi\u0107, lecz znowu Vite okaza\u0142 si\u0119 by\u0107 szybszy od Webpacka.<\/p>\n\n\n\n Co jeszcze mo\u017ce wp\u0142ywa\u0107 mi\u0119dzy innymi na pr\u0119dko\u015b\u0107 startu serwera, \u0142adowania strony lub budowy aplikacji?<\/p>\n\n\n\n Vite umo\u017cliwia wykorzystanie w konfiguracji plugin\u00f3w dostarczonych przez spo\u0142eczno\u015b\u0107, kt\u00f3ra tworzy swoje w\u0142asne rozwi\u0105zania w miar\u0119 potrzeb. I o ile w wielu przypadkach mog\u0105 nam u\u0142atwi\u0107 prac\u0119, pozostaj\u0105 one poza kontrol\u0105 oficjalnych tw\u00f3rc\u00f3w technologii.<\/p>\n\n\n\n Tw\u00f3rcy doradzaj\u0105, aby przy wyborze pluginu sugerowa\u0107 si\u0119 mi\u0119dzy innymi tym, aby:<\/p>\n\n\n\n Czym jest barrel files? Jest to spos\u00f3b na eksportowanie naszego kodu, kt\u00f3ry znajduje si\u0119 w katalogu, w pliku index.js. Przyk\u0142ad:<\/p>\n\n\n\n Przy importowaniu metody helper1, pobieramy tak\u017ce dwie pozosta\u0142e metody, kt\u00f3re nie tylko zajmuj\u0105 miejsce w pami\u0119ci, ale te\u017c mog\u0105 zawiera\u0107 side efects. Podsumowuj\u0105c, pobieramy kod, kt\u00f3rego nie potrzebujemy, a mo\u017ce nam zmniejszy\u0107 performance.<\/p>\n\n\n\n Kolejnym sposobem, jaki tw\u00f3rcy polecaj\u0105 w celu zwi\u0119kszenie wydajno\u015bci, jest korzystanie z natywnych rozwi\u0105za\u0144 przy stalowaniu i dodawaniu grafik. Zalecaj\u0105:<\/p>\n\n\n\n Z perspektywy wydajno\u015bci importowanie plik\u00f3w dla Vite r\u00f3wnie\u017c mo\u017ce by\u0107 bardzo istotne. Chodzi tutaj o rozszerzenie pliku, jakiego szukamy. Vite pozwala na importowanie plik\u00f3w bez podania ich rozszerzenia. W jaki spos\u00f3b si\u0119 to odbywa? Kiedy importujemy plik, np.: \u201eTest.tsx\u201d pod \u015bcie\u017ck\u0105 \u201e.\/components\/Test\u201d, Vite zaczyna szuka\u0107 wskazanego pliku w nast\u0119puj\u0105cej kolejno\u015bci.<\/p>\n\n\n\n Jak wida\u0107, je\u015bli chcieliby\u015bmy importowa\u0107 plik JSON, Vite musi przej\u015b\u0107 kilka krok\u00f3w sprawdzaj\u0105cych czy nasz plik w danym folderze si\u0119 znajduje. Zamiast tego, zaleca si\u0119 importowa\u0107\u00a0plik wraz z rozszerzeniem \u2013 w naszym przypadku b\u0119dzie to \u201e.\/components\/Test.tsx\u201d.<\/p>\n\n\n\n Zd\u0105\u017cyli\u015bmy ju\u017c pozna\u0107 podstawowe zalety Vite. Naturalne pytanie, kt\u00f3re nasuwa si\u0119 ka\u017cdemu programi\u015bcie, brzmi: Czy Vite jest w stanie zast\u0105pi\u0107 Webpacka?<\/strong> Jak zawsze, najlepsz\u0105 odpowiedzi\u0105 b\u0119dzie: \u201eto zale\u017cy\u201d \ud83d\ude09<\/p>\n\n\n\n Na pewno by\u0142oby kusz\u0105c\u0105 wizj\u0105, aby nowy projekt, kt\u00f3ry w\u0142a\u015bnie startujemy, postawi\u0107 za pomoc\u0105 Vite. Niestety, \u017cycie programisty to nie bajka i nie ka\u017cdy ma to szcz\u0119\u015bcie, \u017ce zaczyna projekt od zera. Bardzo cz\u0119sto musimy mierzy\u0107 si\u0119 z starszymi projektami, gdzie wiele paczek jest skonfigurowana pod stabilne, u\u017cywane od wielu lat narz\u0119dzie, jakim jest Webpack. Przepisywanie aplikacji pod Vite by\u0142o by zapewne bardzo problematyczne.<\/p>\n\n\n\n Je\u015bli jednak jeste\u015b osob\u0105 pocz\u0105tkuj\u0105ca w \u015bwiecie IT lub startuje z nowy projekt, to Vite wydaje si\u0119 ciekawym narz\u0119dziem do przetestowania. Jest proste w konfiguracji, HMR to bajeczne rozwi\u0105zanie, kt\u00f3re przyspiesza prac\u0119, a start projektu wi\u0105\u017ce si\u0119 z kilkoma krokami, kt\u00f3re musimy wyklika\u0107 w konsoli i\u2026 voil\u00e0, mo\u017cemy przej\u015b\u0107 do developmentu.<\/p>\n\n\n\n Warto obserwowa\u0107, co b\u0119dzie dzia\u0142o si\u0119 z t\u0105 technologi\u0105, poniewa\u017c potencja\u0142 ma ogromny, cho\u0107 uzale\u017cniony od liczby os\u00f3b, kt\u00f3re b\u0119d\u0105 z niej korzysta\u0107 oraz rozwija\u0107 Vite wraz z pluginami u\u0142atwiaj\u0105cymi prac\u0119. Gor\u0105co Was zach\u0119cam do zapoznania si\u0119 z t\u0105 technologi\u0105 \ud83d\ude0a<\/p>\n\n\n\n ***<\/p>\n\n\n\n Je\u015bli interesuj\u0105 Ci\u0119 narz\u0119dzia wykorzystywane w IT, zajrzyj koniecznie r\u00f3wnie\u017c do innych artyku\u0142\u00f3w naszych ekspert\u00f3w<\/a>. <\/p>\n\n\n<\/a><\/figure>\n\n\n\nTworzenie nowego projektu<\/strong><\/h2>\n\n\n\n
\n
<\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nCo oferuje Vite?<\/strong><\/h2>\n\n\n\n
Hot Module Replacement (HMR)<\/strong><\/h3>\n\n\n\n
\n
Pre-building i NPM dependencies<\/strong><\/h3>\n\n\n\n
\n
Transpilacja kodu TypeScript<\/strong><\/h3>\n\n\n\n
\n
Pozosta\u0142e funkcjonalno\u015bci<\/strong><\/h2>\n\n\n\n
JSON import <\/strong><\/h3>\n\n\n\n
Statyczne assety<\/strong><\/h3>\n\n\n\n
Dynamiczne importy<\/strong><\/h3>\n\n\n\n
CSS<\/strong><\/h3>\n\n\n\n
Pluginy<\/strong><\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\nWydajno\u015b\u0107<\/strong><\/h2>\n\n\n\n
<\/a>Inne wskaz\u00f3wki<\/strong><\/h2>\n\n\n\n
Ostro\u017cne dobieranie plugin\u00f3w<\/strong><\/h3>\n\n\n\n
\n
Unikaj barrel files<\/strong><\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\nZarz\u0105dzanie stylami <\/strong><\/h3>\n\n\n\n
\n
Sprecyzuj rozszerzenie pliku, jaki chcesz importowa\u0107<\/strong><\/h3>\n\n\n\n
\n
Podsumowanie<\/strong><\/h2>\n\n\n\n