Vue Academy · Ders

Derleme Sürecini İyileştirme

Üretim için iyileştirilmiş derlemeler oluşturun.

Derleme Sürecini İyileştirme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Geliştirmeden Üretime

Geliştirme sırasında anında yeniden yükleme özellikli bir geliştirme sunucusu çalıştırırsınız. Yayına almak için, hıza ve küçük boyuta göre ayarlanmış ve herhangi bir barındırıcıya dağıtılmaya hazır statik dosyalar kümesi olan optimize edilmiş bir üretim derlemesi oluşturursunuz.

Derlemeyi Çalıştırma

Standart komut, uygulamanızı üretim için derler. Varsayılan Vue 3 araç zinciri olan Vite, her şeyi derler, paketler ve optimize eder.

npm run build

Derleme Çıktısı

Derleme, optimize edilmiş dosyaları bir dist klasörüne yazar: bir index.html, karmalanmış JavaScript ve CSS paketleri ve statik varlıklarınız. Dağıtacağınız klasör budur.

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

Küçültme

Küçültme, dosyaların daha hızlı indirilmesi için boşlukları ve yorumları kaldırır, değişken adlarını kısaltır. Üretim derlemeleri JavaScript ve CSS'yi otomatik olarak küçültür.

Ağaç Ayıklama

Ağaç ayıklama, hiç kullanmadığınız kodu kaldırır. Bir kitaplıktan tek bir işlev içe aktarırsanız paketleyici geri kalanını çıkarır. Ağaç ayıklamanın çalışmasını sağlamak için ES modüllerinin adlandırılmış içe aktarmalarını kullanın.

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

İçerik Karması

Derleme çıktısı dosya adlarına index-a1b2c3.js gibi bir içerik karması eklenir. Kod değiştiğinde karma da değişir; böylece tarayıcılar yeni dosyayı alırken değişmemiş dosyaları agresif biçimde önbelleğe alır.

Paket Boyutunu Analiz Etme

Paketinizi nelerin doldurduğunu görmek için bir görselleştirici eklenti kullanın. Bu eklenti, hangi modüllerin en fazla yer kapladığını gösteren etkileşimli bir grafik oluşturarak optimizasyonunuza yön verir.

npm install -D rollup-plugin-visualizer

Analizi Okuma

Neredeyse hiç kullanmadığınız büyük bir bağımlılık bir uyarı işaretidir. Analiz, daha küçük bir alternatifle değiştirebileceğiniz veya geç yükleyebileceğiniz ağır bir tarih ya da grafik kitaplığını ortaya çıkarabilir.

Ortam Değişkenleri

Vite, VITE_ ön ekiyle başlayan ortam değişkenlerini import.meta.env üzerinden sunar. Bunları, API adreslerini ve özellik bayraklarını her ortama göre yapılandırmak için kullanın.

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

const apiUrl = import.meta.env.VITE_API_URL

Ortama Özel Derlemeler

Vite, npm run build sırasında .env.production dosyasını, npm run dev sırasında ise .env.development dosyasını yükler; böylece her ortam doğru yapılandırmayı otomatik olarak alır.

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

Derlemeyi Önizleme

Dağıtımdan önce, gerçek optimize edilmiş dosyalarla beklendiği gibi çalıştığını doğrulamak için üretim derlemesini yerel olarak önizleyin.

npm run build
npm run preview

Hızlı Kontrol

Derleme süreci konusundaki bilginizi sınayın.

Özet

Optimize edilmiş bir dist klasörü oluşturmak için npm run build komutunu çalıştırın; bu klasörde küçültülmüş, ağaçtan ayıklanmış ve içeriği karmalanmış varlıklar bulunur. Ağır bağımlılıkları azaltmak için paket boyutunu analiz edin ve ortama özel yapılandırma için .env dosyalarıyla birlikte VITE_ ortam değişkenlerini kullanın. Yayına almadan önce önizleyin. Sırada bu derlemeyi bir barındırma platformuna dağıtmak var.

Sıkça Sorulan Sorular

“Derleme Sürecini İyileştirme” dersi ücretsiz mi?

Evet — “Derleme Sürecini İyileştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Derleme Sürecini İyileştirme” dersinde ne öğreneceğim?

Üretim için iyileştirilmiş derlemeler oluşturun. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“Derleme Sürecini İyileştirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön