Üretim Ortamına Dağıtım
Geliştirme ve Üretim Karşılaştırması
Geliştirme aşamasında Vue, geliştirme deneyimini iyileştirmek için çeşitli özellikler sunar:
- Sık karşılaşılan hatalar ve tuzaklar için uyarılar
- Props / olay (event) doğrulaması
- Tepkisellik hata ayıklama kancaları (hooks)
- Geliştirici araçları (Devtools) entegrasyonu
Ancak, bu özellikler üretim ortamında (production) gereksizleşir. Bazı uyarı kontrolleri az da olsa performans yükü oluşturabilir. Üretim ortamına dağıtım yaparken, daha küçük dosya boyutu ve daha iyi performans elde etmek için kullanılmayan, yalnızca geliştirmeye yönelik kod dallarını (code branches) kaldırmalıyız.
Derleme Araçları Olmadan
Eğer Vue'yu bir CDN veya kendi barındırdığınız (self-hosted) bir betik dosyası üzerinden yükleyerek yapı aracı (build tool) olmadan kullanıyorsanız, üretime dağıtırken üretim derlemesini (.prod.js ile biten dist dosyaları) kullandığınızdan emin olun. Üretim derlemeleri (production builds), geliştirme odaklı tüm kod dalları kaldırılarak önceden küçültülmüş (minified) haldedir.
- Eğer global derleme kullanıyorsanız (
Vueglobal değişkeni üzerinden erişim):vue.global.prod.jsdosyasını kullanın. - Eğer ESM derlemesi kullanıyorsanız (yerel ESM içe aktarımları ile erişim):
vue.esm-browser.prod.jsdosyasını kullanın.
Daha fazla detay için dist dosyası kılavuzuna göz atın.
Derleme Araçlarıyla
create-vue (Vite tabanlı) veya Vue CLI (webpack tabanlı) aracılığıyla oluşturulan projeler, üretim derlemeleri için önceden yapılandırılmıştır.
Eğer özel bir kurulum (custom setup) kullanıyorsanız şunlardan emin olun:
vuereferansınınvue.runtime.esm-bundler.jsdosyasını işaret ettiğinden.- Derleme zamanı özellik bayraklarının uygun şekilde yapılandırıldığından.
process.envdeğerinin derleme işlemi sırasında.NODE_ENV "production"ile değiştirildiğinden.
Ek referanslar:
Çalışma Zamanı Hatalarını İzleme
Uygulama düzeyindeki hata işleyici, hataları izleme servislerine (tracking services) bildirmek için kullanılabilir:
js
import { createApp } from 'vue'
const app = createApp(...)
app.config.errorHandler = (err, instance, info) => {
// hataları izleme servislerine bildirin
}Sentry ve Bugsnag gibi servisler aynı zamanda Vue için resmi entegrasyonlar sağlamaktadır.