Frontend Academy · Oppitunti

Vite: kehityspalvelin ja build

Käynnistä Vite-projekti, käytä sen välittömästi päivittyvää HMR-kehityspalvelinta, suorita build-komento ja esikatsele tuotantokäännöksen tulosta

Oppitunti 3/413 vaihetta

Vite: kehityspalvelin ja build on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mikä Vite on?

Vite on Evan Youn (Vuen luojan) luoma uuden sukupolven frontendin build-työkalu. Se tarjoaa erittäin nopean kehityspalvelimen natiivin ESM:n ja esbuildin avulla sekä Rollupiin perustuvan tuotantobuildin.

Vite-projektin luominen

npm create vite@latest luo uuden projektirungon. Valitkaa käyttämänne framework (Vanilla, React, Vue, Svelte, Preact, Lit) ja variantti (JS tai TS). Projekti on heti valmis — määrityksiä ei tarvita.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

Kehityspalvelin — käynnistyy heti

Vite ei tee bundlea kehityksen aikana. Se tarjoaa jokaisen tiedoston natiivina ESM-moduulina. Selain tuo moduulit suoraan. Bundlen puuttuminen tarkoittaa, että kylmäkäynnistys kestää alle 100 ms projektin koosta riippumatta. HMR:n yhteydessä vain muuttuneet tiedostot käännetään uudelleen.

HMR — Hot Module Replacement

Viten HMR korvaa käynnissä olevassa sovelluksessa vain muuttuneen moduulin lataamatta koko sivua uudelleen. Reactissa @vitejs/plugin-react-lisäosan kanssa komponenttien tila säilyy HMR:n aikana. Muutokset näkyvät alle 50 millisekunnissa.

vite.config.js / vite.config.ts

Vite määritetään vite.config.ts-tiedostossa. Yleisiä asetuksia ovat lisäosat, resolve-aliaset, palvelimen portti, API-kutsujen välityspalvelin ja buildin tuloshakemisto.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

Ympäristömuuttujat

Vite tarjoaa VITE_-etuliitteellä varustetut ympäristömuuttujat import.meta.env-objektin kautta. Tallentakaa ne tiedostoihin .env, .env.development ja .env.production. Älkää koskaan käyttäkö VITE_-etuliitettä salaisuuksille — ne sisällytetään selaimen bundleen.

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

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — tuotantobuild

npm run build kutsuu taustalla Rollupia, joka kokoaa, pienentää ja tree-shake-käsittelee sovelluksen bundlen. Tulos sijoitetaan dist/-kansioon, josta se on valmis julkaistavaksi.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

Bundlen analysointi

Luokaa vite-bundle-visualizer- tai rollup-plugin-visualizer-työkalulla treemap-kuvaus bundlen sisällöstä. Sen avulla voitte tunnistaa liian suuret riippuvuudet ja mahdollisuudet lazy-lataukseen.

npm run preview

npm run preview tarjoaa tuotannon dist/-buildin paikallisesti. Käyttäkää sitä tuotantobuildin tarkistamiseen ennen julkaisua — se paljastaa ongelmat, jotka ilmenevät vain silloin, kun sovellus ei ole kehitystilassa.

Koodin jakaminen Vitessä

Dynaamiset import()-lausekkeet luovat automaattisesti erillisiä chunkeja. React Routerin lazy-reitit ja Vuen defineAsyncComponent käynnistävät myös jakamisen. Tarkistakaa chunkien koot buildin tulosteesta.

Vite kirjastoille

Viten kirjastotila (build.lib) rakentaa npm-kirjastoja ja tuottaa sekä ESM- että CJS-muodot. Määrittäkää ulkoisten riippuvuuksien lista, jotta vertaisriippuvuuksia, kuten Reactia, ei sisällytetä bundleen.

Pikatarkistus

Miksi Viten kehityspalvelin on webpackin palvelinta nopeampi?

Vastaa interaktiivisessa oppitunnissa

Kertaus: Vite

npm create vite@latest luo projektirungon heti. Kehityspalvelin käyttää natiivia ESM:ää — bundlea ei tehdä, ja HMR käynnistyy heti. vite.config.ts on tarkoitettu lisäosille, aliaksille ja välityspalvelimelle. VITE_-etuliite on selaimessa turvallisille ympäristömuuttujille. npm run build tuottaa optimoidun Rollup-bundlen. npm run preview testaa tuotantobuildin paikallisesti.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Vite: kehityspalvelin ja build” ilmainen?

Kyllä – oppitunnin ”Vite: kehityspalvelin ja build” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Vite: kehityspalvelin ja build”?

Käynnistä Vite-projekti, käytä sen välittömästi päivittyvää HMR-kehityspalvelinta, suorita build-komento ja esikatsele tuotantokäännöksen tulosta Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Vite: kehityspalvelin ja build”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

ES-moduulit: import, export ja dynamic import
npm ja package.json: riippuvuudet ja skriptit
Vite: kehityspalvelin ja build
Paketoinnin perusteet: tree shaking ja koodin jako

← Takaisin: Frontend Academy