Vue.js

wygląd

Na tej stronie

Wdrożenie produkcyjne ​

Różnice między środowiskiem developerskim a produkcyjnym ​

Podczas pracy Vue zapewnia szereg funkcji, które poprawiają doświadczenie programistyczne:

  • Ostrzeżenia dotyczące typowych błędów i pułapek
  • Walidacja props i emitowanych zdarzeń
  • Reactivity debugging hooks
  • Integracja z Devtools

Jednak te funkcje stają się bezużyteczne w środowisku produkcyjnym. Niektóre kontrole ostrzeżeń mogą również powodować niewielki narzut wydajnościowy. Podczas wdrażania w środowisku produkcyjnym powinniśmy usunąć wszystkie nieużywane gałęzie kodu przeznaczone wyłącznie do celów programistycznych, aby uzyskać mniejszy rozmiar ładunku i lepszą wydajność.

Bez narzędzi do kompilacji ​

Jeśli używasz Vue bez narzędzia do kompilacji, ładując je z CDN lub samodzielnie hostowanego skryptu, upewnij się, że używasz kompilacji produkcyjnej (pliki dist kończące się na .prod.js) podczas wdrażania do produkcji. Kompilacje produkcyjne są wstępnie minimalizowane, a wszystkie gałęzie kodu przeznaczone wyłącznie do programowania są usuwane.

  • Jeśli używasz kompilacji globalnej (dostęp przez globalną zmienną Vue): użyj vue.global.prod.js.
  • Jeśli używasz kompilacji ESM (dostęp przez natywne importy ESM): użyj vue.esm-browser.prod.js.

Sprawdź przewodnik po plikach dist, aby uzyskać więcej szczegółów.

Z narzędziami do kompilacji ​

Projekty tworzone za pomocą create-vue (na podstawie Vite) lub Vue CLI (na podstawie webpack) są wstępnie skonfigurowane do kompilacji produkcyjnych.

Jeśli używasz niestandardowej konfiguracji, upewnij się, że:

  1. vue jest rozwinięciem vue.runtime.esm-bundler.js.
  2. Flagi funkcji czasu kompilacji są poprawnie skonfigurowane.
  3. process.env.NODE_ENV jest zastępowane przez "production" podczas kompilacji.

Dodatkowe odniesienia:

Śledzenie błędów w czasie wykonywania ​

Obsługa błędów na poziomie aplikacji może być używana do raportowania błędów do usług śledzenia:

js
import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // zgłoś błąd do usług śledzenia
}

Usługi takie jak Sentry i Bugsnag również zapewniają oficjalne integracje z Vue.

Edytuj tę stronę na GitHub