CRA, Vite.js və Bun müqayisəsi

cra-vite-bun.md

Salamlar.

Düşünürəm ki, JavaScript dünyasında yeni olanlar üçün tooling seçimi ən çaşdırıcı mövzulardan biri hesab oluna bilər. Xüsusən də nəzərə alsaq ki, JavaScript üçün eyni işi görən (təxminən) həddən artıq çox alət mövcuddur. Bu kiçik məqalədə React əsasında təcrübə etdiyim 2 və ən yeni elan olunan 1 alət haqqında məlumat verməyə və həmçinin kiçik müqayisə aparmağa çalışacam.

Create-react-app (bundan sonra qısaca CRA)

Bildiyimiz kimi React proyektinin yaradıcıları tərəfindən eyni zamanda yeni bir proyekt yaratmaq üçün alət təqdim olunub və rəsmi olaraq ən çox istifadə olunan hesab olunur. Həmçinin bu proyektin müəllifinin Dan Abramov olması artıq hərşeyi açıqlayır ) Proyekt reposu hazırda rəsmi olaraq Facebook Github orqanizasiyası altında saxlanılır və aktiv şəkildə dəstəklənir. CRA JavaScript dili istifadə edilərək yazılıb. Istifadəsi çox asandır - Node.js yüklədikdən sonra (minimum versiya Node 14 olması tələb olunur)

npx create-react-app my-app

ilə ilkin React proyektin yaradılması mümkündür. Qeyd edim ki, CRA arxa fonda məhşur Webpack istifadə edir. Lakin birbaşa Webpack istifadəsindən fərqli olaraq CRA ilə Webpack konfiqurasiyalarını dəyişdirmək biraz daha əziyyətli işdir (daha ətraflı).

Vite.js

Vite isə yeni bir alət hesab oluna bilər və Vue framework'ün müəllifi Evan You tərəfindən yaradılıb. Vite ilə yaradılmış proyektdə source kod 2 hissəyə bölünür

1. Proyektə daxil olan kitabxanalar və s. Esbuild ilə pre-bundle mərhələsi keçir. Esbuild Go dili ilə yazılmış bir alətdir və JavaScript ilə yazılmış ekvivalentlərindən (məs, Webpack) dəfələrlə sürətlidir

2. Proyektin daxilində yazılan kodlar isə Vite tərəfindən yenə də Esbuild istifadə edilərək build olunur. Vite-nin CRA-dan ən əsas fərqlərindən biri ehtiyac olduğu təqdirdə (brauzer tələb etdiyi) bəzi kodları və ya modulları bundle etməsidir, hansi ki, Vite-nin CRA-dan bu qədər sürətli olmasına imkan verir.

Vite istifadəsi üçün

npm create vite@latest

və ya

yarn create vite@latest

kimi asanlıqla istifadə oluna bilər.

Bun

Məsələ sürətə gəldikdə hamıya aydındır ki, JavaScriptdən çox çox daha sürətli dillər movcuddur (məs, Go, Rust və s.). Bu səbəbdəndir ki, Webpack-dən fərqli olaraq Go ilə yazılmış Esbuild performans baxımından çox daha üstündür. Bun isə bir neçə həftə əvvəl elan olunmuş alətdir və onun da əsas üstünlüyü Zig adlanan proqramlaşdırma dili ilə yazılması hesabına əldə etdiyi sürətdir. Hazırkı ən son versiyası 0.1.4-dür.

Bun istifəsi üçün əvvəlcə onu yükləmək tələb olunur

curl -fsSL https://bun.sh/install | bash

daha sonra isə yeni React proyekti yaratmaq üçün

bun create react ./app

Müqayisə

İndi isə əsas məsələ olan bu 3 alət ilə sıfırdan React proyekti yaradıb aralarında sürət fərqlərinə nəzər salaq. Əvvəlcə onu qeyd edək ki, bütün testlər Macbook Pro (2019, İ7 İntel CPU), Node.js 16.13.1 versiyası ilə həyata keçirilib.

	CRA	Vite	Bun
proyekt yaradılma mərhələsi	22 san	14 san	2 san
proyekt build mərhələsi	13 san	3 san	<1 san

Və sonda onu da qeyd etməkdə fayda var ki, Bun-un tək üstünlüyü onun surəti deyil, birçox əlavələrin daxilində hazır şəkildə gəlməsi və s. aid etmək olar. Proyekt çox yeni olduğu üçün hələki ətraflı məlumat tapmaq biraz çətin məsələdir. Hələlik isə Vite işlətməyə davam...

Təşəkkürlər oxuduğunuz üçün və necə deyərlər feel free to drop a comment...