Vue.js

Appearance

On this page

Ü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:

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 (Vue global değişkeni üzerinden erişim): vue.global.prod.js dosyasını kullanın.
  • Eğer ESM derlemesi kullanıyorsanız (yerel ESM içe aktarımları ile erişim): vue.esm-browser.prod.js dosyası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:

  1. vue referansının vue.runtime.esm-bundler.js dosyasını işaret ettiğinden.
  2. Derleme zamanı özellik bayraklarının uygun şekilde yapılandırıldığından.
  3. process.env.NODE_ENV değerinin derleme işlemi sırasında "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.

Edit this page on GitHub