Przenieśliśmy nasze trzy projekty frontendowe z Parcel na Vite, a proces był... płynny.
Mamy trzy główne projekty frontendowe w Logto: doświadczenie logowania, Konsolę i podgląd na żywo. Projekty te są napisane w TypeScript, React i modułach SASS; w sumie mają około 100 tysięcy linii kodu.
Uwielbialiśmy Parcel za jego prostotę i konfigurację zerową. Wciąż pamiętam dzień, kiedy byłem zszokowany, jak łatwo było uruchomić nowy projekt za pomocą Parcel. Można po prostu uruchomić parcel index.html i boom, wszystkie niezbędne zależności są załadowane, a projekt działa. Jeśli jesteś "doświadczonym" programistą, możesz czuć to samo, porównując go do dawnych dni konfigurowania z Gulp i Webpack. Parcel to jak magiczna różdżka.
Prostota Parcel była głównym powodem, dla którego trzymaliśmy się go tak długo, pomimo że czasem bywał kapryśny. Na przykład:
Dlaczego więc postanowiliśmy migrować do czegoś innego?
Ktoś nawet otworzył dyskusję, pytając czy Parcel jest martwy. Oficjalna odpowiedź brzmi nie, Parcel nadal żyje, ale jest w stanie "pracujemy nad dużym refaktorem i nie mamy czasu na drobne wydania". Dla nas to jak "śmierć kaczki": najnowsza wersja, której możemy używać, pochodzi sprzed ponad roku, i nie wiemy, kiedy zostanie wydana następna wersja. Wygląda, jakby był martwy, działa tak, jakby był martwy, więc dla nas jest martwy.
Poznaliśmy Vite dzięki Vitest. Kilka miesięcy temu, zmęczeni wsparciem ESM w Jest (w testowaniu), chcieliśmy spróbować czegoś nowego. Vitest zdobył nasze serca dzięki natywnemu wsparciu ESM i kompatybilności z Jest. Ma ono niesamowite doświadczenie programisty i jest napędzane przez Vite.
Możesz mieć inne ustawienia w swoim projekcie, ale zwykle znajdziesz zamienniki wtyczek, ponieważ ekosystem Vite rozkwita. Oto nasze ustawienia na moment migracji:
Zaczęliśmy migrację, tworząc nowy projekt Vite i testując go, aby zobaczyć, jak działa. Proces był płynny, a rzeczywista migracja zajęła tylko kilka dni.
Vite ma wbudowaną obsługę monorepo, ESM, TypeScript, React i SASS. Musieliśmy jedynie zainstalować niezbędne wtyczki i konfiguracje, aby wszystko działało.
Vite ma wbudowane wsparcie dla aliasów ścieżek, na przykład w naszym tsconfig.json:
Musieliśmy tylko dodać tę samą rozdzielczość do naszego vite.config.ts:
Zauważ, że ścieżka zastępująca powinna być ścieżką absolutną, podczas gdy jest ona względna do katalogu głównego projektu. Alternatywnie, możesz użyć wtyczki vite-tsconfig-paths, aby odczytać aliasy ścieżek z tsconfig.json.
Chociaż Vite ma wbudowaną obsługę HMR, konieczne było zainstalowanie wtyczki, aby włączyć React Fast Refresh. Użyliśmy wtyczki @vitejs/plugin-react, którą dostarcza zespół Vite i która ma doskonałe wsparcie dla funkcji React, takich jak Fast Refresh:
Używamy wtyczki vite-plugin-svgr, aby konwertować SVG na komponenty React. Wystarczy dodać tę wtyczkę do konfiguracji Vite:
Jednak nie określiliśmy, w jakiej sytuacji SVG powinno być konwertowane na komponenty React, więc wszystkie importy zostały przekonwertowane. Wtyczka oferuje lepszą domyślną konfigurację: tylko SVG importowane z rozszerzeniem .svg?react będą konwertowane. Zaktualizowaliśmy odpowiednio nasze importy.
Chociaż Vite ma wbudowaną obsługę modułów SASS, jest jedna rzecz, na którą musimy zwrócić uwagę: jak formatowane są nazwy klas. Może to być problematyczne dla użytkowników i naszych testów integracyjnych, jeśli nazwy klas nie są formatowane konsekwentnie. Jednolinijkowa konfiguracja w vite.config.ts może rozwiązać ten problem:
Przy okazji, Parcel i Vite mają różne sposoby importowania plików SASS:
Składnia * as, jednak, działa w Vite, ale spowoduje utratę zmodularyzowanych nazw klas, kiedy używasz dynamicznych kluczy do dostępu do obiektu styles. Na przykład:
Ponieważ Vite wykorzystuje Rollup pod spodem, możemy użyć oficjalnej wtyczki @mdx-js/rollup do obsługi MDX oraz jego wtyczek. Konfiguracja wygląda tak:
Wtyczka remarkGfm jest używana do obsługi markdownu w stylu GitHuba, a wtyczka rehypeMdxCodeProps jest używana do przekazywania props do bloków kodu w plikach MDX, tak jak Docusaurus robi.
Chcielibyśmy używać diagramów Mermaid w naszych plikach MDX jako innych języków programowania. Używanie powinno być tak proste, jak inne bloki kodu:
Powinny być renderowane jako:
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'/%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_B_0' d='M72.451%2c62L67.598%2c66.167C62.746%2c70.333%2c53.041%2c78.667%2c48.188%2c86.333C43.336%2c94%2c43.336%2c101%2c43.336%2c104.5L43.336%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_C_1' d='M135.338%2c62L140.191%2c66.167C145.043%2c70.333%2c154.748%2c78.667%2c159.601%2c86.333C164.453%2c94%2c164.453%2c101%2c164.453%2c104.5L164.453%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_B_D_2' d='M43.336%2c166L43.336%2c170.167C43.336%2c174.333%2c43.336%2c182.667%2c47.683%2c190.566C52.029%2c198.465%2c60.723%2c205.929%2c65.069%2c209.662L69.416%2c213.394'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_C_D_3' d='M164.453%2c166L164.453%2c170.167C164.453%2c174.333%2c164.453%2c182.667%2c160.106%2c190.566C155.76%2c198.465%2c147.066%2c205.929%2c142.72%2c209.662L138.373%2c213.394'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(103.89453125%2c 35)' id='flowchart-A-0' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eA%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(43.3359375%2c 139)' id='flowchart-B-1' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eB%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(164.453125%2c 139)' id='flowchart-C-3' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eC%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(103.89453125%2c 243)' id='flowchart-D-5' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eD%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Ponieważ nasza aplikacja obsługuje jasne i ciemne motywy, zakodowaliśmy trochę, aby diagramy Mermaid działały z motywem ciemnym. Stworzono komponent React:
useTheme to niestandardowy hook do pobierania bieżącego motywu z kontekstu. Biblioteka mermaid jest importowana asynchronicznie, aby zmniejszyć rozmiar ładowania strony początkowej.
Dla bloku kodu w pliku MDX mamy zdefiniowany uniwersalny komponent, który wykonuje zadanie:
Na końcu definiujemy dostawcę MDX w następujący sposób:
To nie jest coś specyficznego dla Vite, ale warto to wspomnieć, ponieważ podczas migracji zaktualizowaliśmy nasze strony, aby używały ładowania opóźnionego, i nic się nie zepsuło po tym.
React ma wbudowaną funkcję React.lazy, aby opóźniać ładowanie komponentów. Jednak może to powodować pewne problemy, gdy iterujesz szybko. Stworzyliśmy małą bibliotekę zwaną react-safe-lazy, aby rozwiązać te problemy. To zamiennik dla React.lazy, a szczegółowe wyjaśnienie można znaleźć w tym poście na blogu.
Jest schludna wtyczka o nazwie vite-plugin-compression, która pozwala produkować skompresowane zasoby. Obsługuje zarówno kompresję gzip, jak i brotli. Konfiguracja jest prosta:
Jedną z wielkich cech Vite (lub podstawy Rollup) jest ręczne chunkowanie. Podczas gdy React.lazy jest używany do opóźnionego ładowania komponentów, możemy mieć większą kontrolę nad chunkami, określając ręczne chunki, aby zdecydować, które komponenty lub moduły powinny być łączone razem.
Na przykład, możemy najpierw użyć vite-bundle-visualizer, aby przeanalizować rozmiar pakietu i zależności. Następnie możemy napisać odpowiednią funkcję do podziału chunków:
W przeciwieństwie do builda produkcyjnego, Vite NIE będzie łączyć twojego kodu źródłowego w trybie deweloperskim (w tym połączonych zależności w tym samym monorepo) i traktuje każdy moduł jako plik. Dla nas przeglądarka załaduje setki modułów po raz pierwszy, co wygląda szalenie, ale w większości przypadków to jest w porządku. Można zobaczyć dyskusję tutaj.
Jeśli to problem dla ciebie, alternatywnym, lecz nie idealnym rozwiązaniem jest wymienienie połączonych zależności w opcji optimizeDeps w vite.config.ts:
To "wstępnie połączy" połączone zależności i przyspieszy serwer deweloperski. Wadą jest to, że HMR może nie działać zgodnie z oczekiwaniami dla połączonych zależności.
Dodatkowo, używamy proxy, które serwuje statyczne pliki w produkcji i przekierowuje zapytania do serwera Vitest w trybie deweloperskim. Mamy skonfigurowane specyficzne porty, aby uniknąć konfliktów, co również jest łatwe do ustawienia w vite.config.ts:
W przeciwieństwie do Parcel, Vite stosuje nowoczesne podejście do obsługi zmiennych środowiskowych, używając import.meta.env. Automatycznie ładuje pliki .env i zastępuje zmienne w kodzie. Jednak wymaga, aby wszystkie zmienne środowiskowe były prefiksowane VITE_ (konfigurowalne).
Podczas używania Parcel-a, po prostu zastępował process.env bez sprawdzania prefiksu. Więc wymyśliliśmy rozwiązanie, używając pola define, aby ułatwić migrację:
To pozwala nam stopniowo dodawać prefiks do zmiennych środowiskowych i usuwać pole define.
To wszystko! Udało nam się pomyślnie przenieść nasze trzy projekty frontendowe z Parcel na Vite i mamy nadzieję, że ta krótka historia pomoże w twojej migracji. Oto jak wygląda konfiguracja na końcu: