Frontend Academy · Oppitunti

esbuild: nopeus ja rajoitukset

Käytä esbuildia itsenäisenä bundlerina ja ymmärrä, miksi se on suuruusluokkia webpackia nopeampi sekä millaisia rajoituksia sillä tällä hetkellä on laajennusten ja tyyppien suhteen.

Oppitunti 2/415 vaihetta

esbuild: nopeus ja rajoitukset on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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ä esbuild on

esbuild on Go-kielellä kirjoitettu bundleri ja minifioija. Se on natiivin monisäikeisyyden ja olemattomien käynnistyskustannusten ansiosta 10–100 kertaa JavaScript-pohjaisia bundlereita nopeampi. Sen loi Evan Wallace (Figma).

Nopeusvertailut

Reactin lähdekoodin (noin 6 Mt) bundlaus: esbuild noin 0,4 s, Webpack noin 9 s, Rollup noin 6 s ja Parcel noin 10 s. Nopeus perustuu seuraaviin tekijöihin: käännetty Go, rinnakkaisuus, AST:n muuntamisen puuttuminen vaiheiden välillä ja yksinkertainen arkkitehtuuri.

esbuildin suora käyttö

Asennus ja suoritus tehdään komentoriviltä.

npm install -D esbuild

npx esbuild src/app.ts \
  --bundle \
  --outfile=dist/app.js \
  --minify \
  --sourcemap \
  --target=es2020 \
  --platform=browser

Ohjelmallinen API

Sitä käytetään koontiskriptistä, kun tarvitaan enemmän hallintaa.

// build.js
import { build } from 'esbuild';

await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  platform: 'browser',
  define: { 'process.env.NODE_ENV': '"production"' }
});

TypeScript ilman tsc:tä

esbuild poistaa TypeScript-syntaksin (muuntaa .ts-tiedostot .js-tiedostoiksi) paljon tsc:tä nopeammin. Se EI tarkista tyyppejä — sitä varten suoritetaan erikseen tsc --noEmit.

# Strip types and bundle in one go:
npx esbuild src/index.ts --bundle --outfile=dist/index.js

# Type-check separately (slower, can run in parallel):
npx tsc --noEmit

Kehityspalvelin ja hot reload

esbuild sisältää sisäänrakennetun kehityspalvelimen, jossa on watch-tila ja HMR context-rajapinnan kautta.

import { context } from 'esbuild';

const ctx = await context({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outdir: 'dist'
});

await ctx.watch();
await ctx.serve({ servedir: 'public', port: 8000 });

Laajennusarkkitehtuuri

esbuild tukee laajennuksia, joissa on kaksi pääasiallista hookia: onResolve (moduulien resolvointiprosessin kaappaaminen) ja onLoad (sisällön tarjoaminen ratkaistuille moduuleille).

const myPlugin = {
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, () => ({ path: 'env', namespace: 'env-ns' }));
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json'
    }));
  }
};

Lataajat

esbuildissa on sisäänrakennetut lataajat seuraaville tyypeille: js, ts, jsx, tsx, json, css, text, base64, dataurl, file ja binary. CSS-tuki rajoittuu bundlaukseen (ei moduuleja eikä PostCSS:ää) — käytettävä on laajennusta tai muuta työkalua.

Rajoitukset Rollupiin ja Viteen verrattuna

1) Laajennusekosysteemi on pienempi. 2) CSS-putki on suppea — CSS Modules -tukea, PostCSS:ää tai esikääntäjiä ei ole valmiina. 3) Frameworkeille ei ole HMR-tukea (Reactin ja Vuen kaltaiset frameworkit tarvitsevat framework-kohtaisen HMR:n). 4) Tree shaking -varoituksia tai -analyysiä ei ole. 5) Tuki monimutkaisille SSR-kokoonpanoille on vähemmän kypsä.

Milloin esbuild on parhaimmillaan

1) Kirjastojen bundlauksessa (yksi entrypoint ilman frameworkia). 2) Lambdan ja Workereiden paketoinnissa (minimaalinen cold start). 3) Vite- tai tsup-työkalun osana (käytetään TypeScriptin muunnokseen taustalla). 4) Siirryttäessä tsc:stä nopeampaan TypeScript-putkeen.

esbuild muissa työkaluissa

Vite käyttää esbuildia kehityksen aikaiseen TS/JSX-muunnokseen ja node_modules-riippuvuuksien esibundlaukseen. tsup käyttää esbuildia kirjastojen bundlaukseen. Rollupille on saatavilla esbuild-laajennus. Monet työkalut yhdistävät esbuildin nopeuden omaan käyttökokemukseensa.

tsup — kirjastoille sopiva esbuild-kääre

npm-kirjastojen julkaisemista varten tsup käärii esbuildin järkevillä oletusasetuksilla: se tuottaa CJS:n, ESM:n ja .d.ts-tiedostot, seuraa muutoksia kehityksen aikana ja hyväksyy yksinkertaisen konfiguraation.

# package.json
"scripts": { "build": "tsup src/index.ts --format esm,cjs --dts" }

Bundlen koon kompromissit

esbuild minifioi nopeasti, mutta sen minifiointi on hieman vähemmän aggressiivista kuin Terserin. Terser voidaan suorittaa jälkivaiheena, jos tavoitteena on ehdottomasti pienin mahdollinen tuloste ja koko on rakennusnopeutta tärkeämpi.

Pikatarkistus

esbuild voi korvata tsc:n TypeScriptin kääntämisessä — mutta mitä tsc tekee, mitä esbuild EI tee?

Vastaa interaktiivisessa oppitunnissa

Kertaus: esbuild

Go-pohjainen bundleri, joka on 10–100 kertaa JS-bundlereita nopeampi. CLI ja ohjelmallinen API. Poistaa TypeScript-syntaksin (ei tyyppitarkistusta — suorittakaa tsc --noEmit). Laajennushookit: onResolve ja onLoad. Rajoitukset: suppea laajennusekosysteemi, minimaalinen CSS-putki ja frameworkien HMR:n puuttuminen. Soveltuu parhaiten kirjastoille, Lambdalle ja Workereille sekä Viten ja tsupin sisäiseksi työkaluksi. npm-kirjastoille kannattaa käyttää tsup-käärettä.

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 ”esbuild: nopeus ja rajoitukset” ilmainen?

Kyllä – oppitunnin ”esbuild: nopeus ja rajoitukset” 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 ”esbuild: nopeus ja rajoitukset”?

Käytä esbuildia itsenäisenä bundlerina ja ymmärrä, miksi se on suuruusluokkia webpackia nopeampi sekä millaisia rajoituksia sillä tällä hetkellä on laajennusten ja tyyppien suhteen. 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 2/4.

Kuinka kauan ”esbuild: nopeus ja rajoitukset”-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

← Takaisin: Frontend Academy