e
sv

Vite 3.0 ve Create React App: Karşılaştırma ve geçiş kılavuzu

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Create React App (CRA), React topluluğunun ve genel olarak ekosisteminin gelişiminde çok önemli bir rol oynamıştır. Bir hevesle yerel bir React geliştirme ortamı oluşturmak söz konusu olduğunda, farklı beceri setlerine sahip geliştiriciler için tercih edilen bir araçtır.

CRA, gözden kaçırmayı zorlaştıran birkaç göze çarpan özelliğe sahiptir, en öne çıkanları şunlardır: yerel geliştirme sunucusu, Sıcak Modül Değiştirme (HMR) ve üretim paketleme. Bununla birlikte, CRA'nın ilerici hız ve performans düşüşü olan önemli bir dezavantajı vardır.

Bir uygulamanın boyutu ve karmaşıklığı büyüdükçe, Create React App'in performansı düşme eğilimi gösterir ve bir geliştirme sunucusunu başlatmak için gereken süre önemli ölçüde artar. Bu, CRA'yı üretim için elverişsiz hale getirir.

Bu kılavuzda, esbuild üzerine kurulu bir derleme aracı olan Vite'ı tanıtacağız. Vite ile React uygulamaları oluşturmaya başlamak için bilmeniz gereken her şeyi ele alacağız. Ayrıca Vite ile CRA arasındaki farkları gözden geçireceğiz ve Create React App'ten Vite'a nasıl geçileceğini göstereceğiz.

İleri atla:

Önkoşullar

Bu makalenin öğretici bölümünü takip etmek için aşağıdakilere ihtiyacınız olacak:

  • Node.js v14.18 veya üstü
  • Yerel ES modülleri (ESM) ve dinamik içe aktarma desteği olan bir tarayıcı; çoğu modern tarayıcı bu desteğe sahiptir
  • npm veya Yarn gibi bir paket yöneticisi

Vite nedir?

Vite, mevcut ve yeni nesil web geliştirme arasındaki boşluğu kapatmayı amaçlayan bir yapı aracıdır. Geliştiriciler ve modern web projeleri için daha hızlı ve daha performanslı bir deneyim sağlamaya odaklanır.

Vite, bağımlılıkları JavaScript tabanlı paketleyicilerden 10-100 kat daha hızlı bir şekilde bir araya getiren, Go'da yazılmış bir JavaScript paketleyici olan esbuild üzerine kurulmuştur.

Vite, Vue.js'nin yaratıcısı Evan You tarafından oluşturuldu. Ancak, platformdan bağımsızdır, yani React, Svelte, Preact ve hatta vanilya JavaScript gibi popüler kitaplıkları destekleyen JavaScript/TypeScript uygulamaları geliştirmek için kullanılabilir.

Vite, tarayıcının istediği gibi kodunuzu ayrıştırmak ve derlemek için tarayıcının yerel ESM'sinden yararlanır. Ardından, sunulan modülleri güncellemek için Sıcak Modül Değiştirme (HMR) ve üretim yapıları için Toplama desteğine sahip bir geliştirme sunucusu oluşturmak için Koa (hafif bir Node.js web sunucusu) gibi bir eklenti kullanarak kaynak dosyaya hizmet eder.

Vite ve Create React App nasıl çalışır?

Vite ve CRA, düşündüğünüz kadar farklı değil. Özünde, yerel bir geliştirme sunucusuna hizmet etmek ve üretim için kodları bir araya getirmek için hemen hemen aynı şeyi yaparlar. Fark edeceğiniz en büyük fark, geliştirmede kodun nasıl sunulduğu ve hangi modüllerin desteklendiğidir.

Create React App, geliştiricilerin derleme araçlarını yapılandırmak yerine kodlarına odaklanmasını sağlayarak geliştirme sürecini hızlandırmaya yardımcı olan bir geliştirme ortamıdır.

CRA, temel işlevlerini kaputun altında işlemek için webpack adlı bir üçüncü taraf oluşturma aracı kullanır. Bu gerçekten Vite'nin karşı karşıya olduğu şey.

Peki, web paketi nedir? webpack, tıpkı Vite gibi bir JavaScript modülü paketleyicisidir. Ancak Vite'tan farklı olarak, web paketi kutudan çıktığı gibi birden fazla modülü destekler:

  • ESM
  • CommonJS
  • Asenkron Modül Tanımlama (AMD) API'si

webpack, varlıkları ve modülleri bir veya daha fazla statik varlıkta birleştirmek için bu JavaScript modül sistemlerinden herhangi birini kullanır, ardından HMR desteğiyle paketlenmiş varlıktan içerik sunmak için Express.js web sunucusunu ve webpack-dev-server'ı kullanır.

İşleri bir perspektife oturtmaya yardımcı olmak için, geliştirme sırasında her iki aracın da bu işlevleri nasıl ele aldığını inceleyeceğiz.

Geliştirme aşamasında React Uygulaması oluşturun

Bir CRA geliştirmesini ilk kez başlattığınızda, web paketinin yaptığı ilk şey, projedeki tüm modüllerden bir bağımlılık ağacı oluşturmak için uygulamanın giriş noktasını ( index.js dosyası) kullanmaktır.

Ardından, kodu Babel ile aktarır, kodu bir araya toplar ve Express.js web sunucusuyla birlikte sunar. Son olarak, Sıcak Modül Değişimini gerçekleştirecek soketleri kurar.

Bu yaklaşım daha hızlı olmasına ve kodunuza odaklanmanıza izin vermesine rağmen, önemli bir dezavantajı vardır.

webpack, kodda her değişiklik olduğunda paketleme işlemini tekrarlar. Sonuç olarak, kaynak kodunuz büyüdüğünde her şey yavaşlar. Bir geliştirici sunucusuna hizmet vermek ve projelerinizi oluşturmak için gereken süre önemli ölçüde artar.

İşte CRA geliştirme sürecinin görsel bir tasviri:

Paket tabanlı Geliştirici Sunucusu

Geliştirme aşamasında

Öte yandan, Vite'ın uygulamanızı sunmaya başlamadan önce geliştirmeyi ilk başlattığınızda yalnızca esbuild kullanarak bağımlılıklarınızı önceden paketlemesi gerekir.

Vite'ın bir geliştirme sunucusu başlatmadan önce tüm uygulamayı paketlemesi veya modülleri ve kodu aktarması gerekmez; aktarma isteğe bağlı olarak yapılır, bu da onu CRA'dan önemli ölçüde daha hızlı hale getirir.

Uygulamayı sunduktan sonra Vite, CRA gibi tüm sayfayı yeniden oluşturmak ve yeniden yüklemek yerine, kodun hangi bölümünün yüklenmesi gerektiğini belirlemek için rota tabanlı kod bölmeyi kullanır. Ardından, uygulamanın giriş noktasından yerel ES modüllerini ayrıştırmak için tarayıcıyı kullanır.

Bunun anlamı, tarayıcının kodunuzdaki import ve export ifadelerini okuyacak ve her içe aktarma için sunucuya HTTP istekleri yapacaktır. Geliştirici sunucusu daha sonra istekleri yakalar ve gerektiğinde kod dönüştürmesi gerçekleştirir.

Herhangi bir değişiklik yapılmayan modüller 304 "değiştirilmedi" durum kodu döndürür, bu nedenle tarayıcı bunları görmezden gelir. Bu şekilde, tarayıcının yeniden yüklenmesi gerekmez ve uygulama durumunu korur.

İşte Vite geliştirme sürecinin görsel bir tasviri:

Yerel ESM Geliştirme Sunucusu

Neden Vite'ı kullanmalısınız?

Vite for React uygulama geliştirmeyi kullanmanın birkaç avantajını daha önce gözden geçirmiştik. Şimdi Vite'ın faydalarına daha yakından bakalım.

Üstün performans

Ön paketleme işlemi sırasında Vite, CommonJS veya UMD olarak gönderilen bağımlılıkları ESM'ye dönüştürür. Bu dönüştürme, Vite yalnızca ESM'yi desteklediği ve varsayılan olarak yerel ESM kodlarını sunduğu için gerçekleşir.

Vite, sayfa yükleme performansını iyileştirmek için birçok dahili modüle sahip bağımlılıkları tek bir modüle dönüştürebilir. Bu modüller, tarayıcıda tıkanıklık yaratabilecek ve yükleme süresini olumsuz yönde etkileyebilecek yüzlerce isteği aynı anda tetikleme eğilimindedir. Ancak, bu bağımlılıkları tek bir dosyada önceden gruplayarak, yalnızca bir istek göndermeleri gerekir, böylece genel performansı artırırlar.

Kapsamlı eklenti uyumluluğu

Vite, bir geliştiricinin deneyimini geliştirmek için Rollup eklentilerinin olgun ekosistemine güvenmelerini sağlayarak Rollup eklenti arayüzünden yararlanır. Başka bir deyişle, Vite, kutudan çıkan çoğu Rollup eklentisiyle uyumludur.

Daha hızlı güncellemeler

Paket tabanlı bir sunucuda uygulamanın boyutu arttıkça HMR hızının nasıl önemli ölçüde bozulduğunu daha önce açıklamıştık.

Vite'da HMR, yerel ESM üzerinden gerçekleştirilir. Sıcak güncellemeleri kabul eden bir modülde değişiklikler meydana geldiğinde, Vite'ın sadece modülü kesin olarak geçersiz kılması gerekir. Bu, uygulamanın boyutundan bağımsız olarak daha hızlı bir HMR güncelleme süresi sağlar.

Daha hızlı inşa süresi

Vite, üretim için uygulamalar oluşturmak için önceden yapılandırılmış Toplama kullanır. Toplama, web paketinden daha verimli bir paketleyicidir, bu nedenle Vite'nin oluşturma süresi CRA'nınkinden daha hızlı olma eğilimindedir ve çıktısının boyutu daha küçüktür

Vite 3.0 ile bir React projesi kurma

Bir Vite uygulaması oluşturmak için makinenizin terminaline, cd tercih edilen bir klasöre gidin ve aşağıdaki komutu çalıştırın:

 npm vite@latest oluştur

Komutu çalıştırdıktan sonra, CLI sizden bir proje adı vermenizi isteyecektir. Bizim durumumuzda, varsayılan adı vite-project kullanacağız. Ardından, mevcut şablonlar listesinden tepki seçeceğiz. Bu genellikle 10 saniye veya daha az sürer.

React Çerçevesini Seçme

Alternatif olarak, komutta seçim şablonunuzu belirtebilir ve komut istemine girmekten kaçınabilirsiniz.

Bunu bir --template bayrağı ve ardından çerçevenin adını ekleyerek yapabilirsiniz:

 npm init vite@en son vite-project --template tepki

Ardından, proje klasörüne cd atın, gerekli bağımlılıkları kurun ve aşağıdaki komutlarla dev sunucusunu başlatın:

 cd vite projesi
npm kurulumu
npm çalıştırma dev

Bu komutlar çalıştırıldıktan sonra, 5173 numaralı bağlantı noktasında bir geliştirme sunucusu çalışır ve çalışır. Vite'nin bir uygulamaya hizmet vermesi genellikle yalnızca 1325 ms sürer.

1325 ms'de Vite Hazır

Şimdi tarayıcınızı açın ve localhost:5173 girin. Özetin özeti sayma düğmesinin bulunduğu aşağıdakine benzer bir sayfa göreceksiniz.

Vite ve Tepki Sayfası

Bu kadar! Vite React geliştirme ortamını başarıyla kurduk!

Ardından, bir React Uygulaması Oluştur projesinin Vite'a nasıl taşınacağına bakacağız.

Create React App projesini Vite'a taşıma

Mevcut bir CRA projeniz varsa, onu Vite'a taşımak oldukça basittir.

İlk adım olarak, proje klasörünüzde package.json dosyasını açın ve bağımlılıklar listesinden react-scripts silin:

 "bağımlılıklar": {
    ...
    "tepki komut dosyaları": "5.0.1",
    ...
  },  

Ardından, aşağıdaki içeriğe sahip bir "devDependencies" ekleyin:

 "devBağımlılıkları": {
    "@vitejs/plugin-tepki": "^2.0.1",
    "vite": "^3.0.7"
  },  

Not , her zaman en son sürümü kullanmanız önerilir

Şimdi, komut dosyalarını değiştirin:

 "Kodlar": {
    "start": "tepki komut dosyaları başlat",
    "build": "react-scripts build",
    "test": "tepki komut dosyaları testi",
    "eject": "tepki komut dosyaları çıkar"
  },

Takip ederek:

 "Kodlar": {
    "başlat": "hayır",
    "build": "vite build",
  },  

Ardından, Public klasörünün içindeki index.html dosyasına gidin ve bağlantı yollarındaki her %PUBLIC_URL%/ önekini kaldırın:

 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Kaldırılan öneki aşağıdakiyle değiştirin:

 <link rel="icon" href="./public/favicon.ico" />
 ...
<link rel="apple-touch-icon" href="./public/logo192.png" />
 ...
<link rel="manifest" href="./public/manifest.json" />

Ardından, body öğesinin içine, root div'in hemen altına bir giriş noktası komut dosyası ekleyin:

 <script type="module" src="/src/index.jsx"></script>

Ancak bunu yapmadan önce, React kodlarını içeren her .js dosyasını bir .jsx dosyası olarak yeniden adlandırın. Örneğin, index.js dosyasını index.jsx olarak yeniden adlandırırsınız.

Ardından index.html dosyasını kök klasöre taşıyın.

Dizin Dosyası

Sonraki adım, bir Vite yapılandırma dosyası oluşturmak, düğüm modülleri klasörünü silmek ve bağımlılıkları yeniden yüklemektir.

Kök klasör içinde bir vite.config.js dosyası oluşturarak başlayın ve aşağıdaki kodu ekleyin:

 "vite" dan { defineConfig } içe aktarın;
"@vitejs/plugin-react" adresinden tepkiyi içe aktar;

varsayılan defineConfig({
  eklentiler: [react()],
})

Ardından, kök klasöre gidin ve node_modules klasörünü silin. Ardından, bağımlılıkları yeniden yüklemek ve geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın:

 npm kurulumu
npm başlangıç

Şimdi, tarayıcınızı açıp localhost:5173'e giderseniz, geliştirme sunucusunun başarıyla açılması gerekir.

Geliştirici Sunucusu Yüklendi

Create React App ve Vite arasındaki farklar

CRA ve Vite'ın nasıl çalıştığına baktık ve CRA yerine Vite kullanmanın bazı avantajlarını inceledik. Şimdi, bu araçlar arasındaki bazı farklılıklara bir göz atalım.

Mutlak ithalat

Vite ile geliştirmeye başladığınızda, muhtemelen fark edeceğiniz ilk şey yol çözümlemedeki fark olacaktır. CRA'dan farklı olarak Vite'ın yerleşik bir src yolu yoktur.

Bu nedenle, React uygulamanızdaki dosyaları ve bileşenleri şu şekilde içe aktarmak yerine:

 "bileşenlerden/kartlardan" Kartları içe aktarın;

Bunları şu şekilde içe aktarmanız gerekecek:

 Kartları “/src/components/cards.jsx” dosyasından içe aktarın

Neyse ki, bu yolun çözülmesi için bir düzeltme var.

Projenin kök klasörüne gidin, vite.config.js dosyasını açın ve mevcut kodu değiştirin:

 "vite" dan { defineConfig } içe aktarın;
"@vitejs/plugin-react" adresinden tepkiyi içe aktar;

varsayılan defineConfig({
  eklentiler: [react()],
}); 

Takip ederek:

 "vite" dan { defineConfig } içe aktarın;
"@vitejs/plugin-react" adresinden tepkiyi içe aktar;

varsayılan defineConfig({
  çözmek: {
    takma ad: [
      {
        bul: "ortak",
        değiştirme: çözümle(__dirname, "src/ortak"),
      },
    ],
  },

  eklentiler: [react()],
});

Kodu kaydedin ve şimdi projenizde mutlak yolları kullanabilmelisiniz.

Ortam Değişkenleri

Create React App ve Vite arasındaki diğer bir fark, ortam değişkeni adlandırma kuralıdır. Projenizde ortam değişkenleri kullanıyorsanız, REACT_APP_ önekini VITE_ ile değiştirmek isteyeceksiniz.

 //Bunun yerine 
REACT_APP_ API_KEY = 1234567890..
//Bunu kullan
VITE_API_KEY = 1234567890..

Değişkenleri tek tek değiştirmek, özellikle .env dosyasında çok sayıda değişkeniniz varsa, zahmetli olabilir. Neyse ki, vite-plugin-env-uyumlu paket, ortam değişkenlerini isimlerini değiştirmeden kullanmamıza izin veriyor.

vite-plugin-env uyumlu paketi kurmak için aşağıdaki komutu kullanın:

 npm i vite-plugin-env-uyumlu

Ardından, projenin kök klasöründeki vite.config.js dosyasına gidin ve aşağıdaki kodu ekleyin:

 envCompatible'ı 'vite-plugin-env-uyumlu'dan içe aktarın;

varsayılan defineConfig({
    ...
  envÖnek: 'REACT_APP_',

  eklentiler: [
    tepki(),
    envUyumlu
  ],
});

envPrefix özelliği, REACT_APP_ öneki olan değişkenleri kullanmasını söyleyecektir. Artık isim değiştirmeden projenizde ortam değişkenlerini kullanabilirsiniz. Ancak yine de kodunuzda process.env import.meta.env ile değiştirmeniz gerekecektir.

Kod tabanınızdaki her process.env hızla bulmak ve değiştirmek için IDE'nizdeki arama özelliğini kullanabilirsiniz.

Çözüm

Bu makalede, Vite'ı tanıttık, temel kavramlarını Create React App ile karşılaştırdık ve her iki aracın da geliştirmede nasıl çalıştığına baktık. Ayrıca Vite kullanmanın faydalarını inceledik ve Create React App projesinin Vite'a nasıl taşınacağını gösterdik.

Vite 3.0 vs. Create React App: Karşılaştırma ve geçiş kılavuzu ilk olarak LogRocket Blog'da yayınlandı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Vite 3.0 ve Create React App: Karşılaştırma ve geçiş kılavuzu