Vue Academy · Lekcja

Optymalizacja procesu budowania

Tworzenie zoptymalizowanych buildów produkcyjnych.

Optymalizacja procesu budowania to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Od programowania do produkcji

Podczas programowania uruchamia się serwer deweloperski z funkcją hot reload. Aby opublikować aplikację, należy utworzyć zoptymalizowany build produkcyjny: zestaw statycznych plików dostosowanych pod kątem szybkości i niewielkiego rozmiaru, gotowych do wdrożenia na dowolnym hoście.

Uruchamianie buildu

Standardowe polecenie buduje aplikację w wersji produkcyjnej. Vite, czyli domyślne narzędzie dla Vue 3, kompiluje, scala i optymalizuje wszystkie elementy.

npm run build

Wynik buildu

Build zapisuje zoptymalizowane pliki w folderze dist: plik index.html, paczki JavaScript i CSS z haszami oraz statyczne zasoby. To właśnie ten folder należy wdrożyć.

dist/
  index.html
  assets/
    index-a1b2c3.js
    index-d4e5f6.css

Minifikacja

Minifikacja usuwa białe znaki i komentarze oraz skraca nazwy zmiennych, dzięki czemu pliki pobierają się szybciej. Buildy produkcyjne automatycznie minifikują JavaScript i CSS.

Tree-shaking

Tree-shaking usuwa nieużywany kod. Jeśli zaimportują Państwo jedną funkcję z biblioteki, bundler odrzuci pozostałą część. Należy używać importów nazwanych modułów ES, aby tree-shaking mógł działać.

// only what you use is bundled
import { debounce } from "lodash-es"

Haszowanie zawartości

Nazwy plików wynikowych buildu zawierają hasz zawartości, na przykład index-a1b2c3.js. Gdy kod się zmieni, zmieni się również hasz, dzięki czemu przeglądarki pobiorą nowy plik, a niezmienione będą intensywnie buforować.

Analizowanie rozmiaru paczki

Aby sprawdzić, co zajmuje miejsce w paczce, należy użyć wtyczki wizualizującej. Tworzy ona interaktywny wykres pokazujący, które moduły zajmują najwięcej miejsca, i pomaga ukierunkować optymalizację.

npm install -D rollup-plugin-visualizer

Odczytywanie wyników analizy

Duża zależność, z której korzysta się w niewielkim zakresie, jest sygnałem ostrzegawczym. Analiza może ujawnić rozbudowaną bibliotekę dat lub wykresów, którą można zastąpić mniejszą alternatywą albo ładować leniwie.

Zmienne środowiskowe

Vite udostępnia zmienne środowiskowe z prefiksem VITE_ za pośrednictwem import.meta.env. Należy używać ich do konfigurowania adresów URL API i flag funkcji zależnie od środowiska.

// .env.production
// VITE_API_URL=https://api.example.com

const apiUrl = import.meta.env.VITE_API_URL

Buildy zależne od środowiska

Vite ładuje plik .env.production podczas wykonywania npm run build oraz plik .env.development podczas wykonywania npm run dev, dzięki czemu każde środowisko automatycznie otrzymuje właściwą konfigurację.

// .env.development -> VITE_API_URL=http://localhost:3000
// .env.production  -> VITE_API_URL=https://api.example.com

Podgląd buildu

Przed wdrożeniem należy uruchomić lokalny podgląd produkcyjnego buildu, aby potwierdzić, że działa zgodnie z oczekiwaniami na rzeczywistych zoptymalizowanych plikach.

npm run build
npm run preview

Szybki test

Sprawdź swoją wiedzę na temat procesu budowania.

Podsumowanie

Uruchomienie npm run build tworzy zoptymalizowany folder dist z minifikowanymi zasobami po tree-shakingu i haszowaniu zawartości. Należy analizować rozmiar paczki, aby ograniczać duże zależności, oraz używać zmiennych środowiskowych VITE_ wraz z plikami .env do konfiguracji poszczególnych środowisk. Przed publikacją należy sprawdzić podgląd. W następnym kroku wdrożą Państwo ten build na platformę hostingową.

Często zadawane pytania

Czy lekcja „Optymalizacja procesu budowania” jest bezpłatna?

Tak — pełny tekst „Optymalizacja procesu budowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Optymalizacja procesu budowania”?

Tworzenie zoptymalizowanych buildów produkcyjnych. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Optymalizacja procesu budowania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy