Bereitstellung der Produktionsumgebung


Die meisten der folgenden Funktionen sind standardmäßig aktiviert, wenn Sie die Vue CLI verwenden. Dieser Abschnitt ist nur für Ihre benutzerdefinierten Build-Einstellungen relevant.


Inhaltsverzeichnis


Produktionsumgebungsmodus aktivieren

In der Entwicklungsumgebung Vue Es werden zahlreiche Warnungen bereitgestellt, die Ihnen beim Umgang mit häufigen Fehlern und Fallstricken helfen. In einer Produktionsumgebung sind diese Warnhinweise nutzlos, erhöhen jedoch die Größe der Anwendung. Darüber hinaus verursachen einige Warnprüfungen einen geringen Laufzeitaufwand, der im Produktionsmodus vermieden werden kann.


Verwenden Sie keine Build-Tools

Wenn Sie die vollständige unabhängige Version von Vue verwenden , verwenden Sie es direkt Das <script>-Element wird in Vue eingeführt, ohne es vorher zu erstellen. Bitte denken Sie daran, die komprimierte Version in der Produktionsumgebung zu verwenden. (vue.min.js). Beide Versionen finden Sie im Installationshandbuch.


Build-Tools verwenden

Bei Verwendung von Build-Tools wie Webpack oder Browserify wird der Vue-Quellcode verwendet Bestimmen Sie, ob der Produktionsumgebungsmodus gemäß process.env.NODE_ENV aktiviert werden soll. Der Standardwert ist der Entwicklungsumgebungsmodus. Es gibt Methoden in Webpack und Browserify, um diese Variable zu überschreiben, um den Produktionsumgebungsmodus von Vue zu aktivieren, und Warnanweisungen werden auch während des Erstellungsprozesses vom Komprimierungstool entfernt. All dies ist in der vue-cli-Vorlage vorkonfiguriert, aber es wäre schön zu wissen, wie man es konfiguriert.

Webpack

In Webpack 4 können Sie die Option mode verwenden: 

module.exports = {
  mode: 'production'
}

Aber in Webpack 3 und niedriger müssen Sie verwenden DefinePlugin: 

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

Browserify

  • Setzt NODE_ENV auf "production", wenn der Paketierungsbefehl ausgeführt wird. Dadurch wird vueify angewiesen, die Einführung von Hot-Reloading und die Entwicklung von zugehörigem Code zu vermeiden.

  • Führen Sie eine globale envify-Konvertierung für die gepackte Datei durch. Dadurch kann das Komprimierungstool alle Warnanweisungen entfernen, die in Umgebungsvariablenbedingungen im Vue-Quellcode eingeschlossen sind. Zum Beispiel: 

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

  • oder verwenden Sie envify in Gulp: 

// 使用 envify 的自定义模块来定制环境变量var envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(    // 必填项，以处理 node_modules 里的文件
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()
// 使用 envify 自定义模块指定环境变量var envify = require('envify/custom')

browserify: {  dist: {    options: {
        // 该函数用来调整 grunt-browserify 的默认指令
        configure: b => b
        .transform('vueify')
        .transform(
            // 用来处理 `node_modules` 文件
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
    }
  }
}

Rollup

verwenden rollup-plugin-replace: 

const replace = require('rollup-plugin-replace')
rollup({  // ...
  plugins: [
    replace({      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)


Vorlage vorkompiliert

Bei Verwendung von DOM-Innenvorlagen oder JavaScript Wenn eine Zeichenfolgenvorlage enthalten ist, wird die Vorlage zur Laufzeit in eine Rendering-Funktion kompiliert. Normalerweise ist dieser Vorgang schnell genug, aber leistungsempfindliche Anwendungen sollten diese Verwendung am besten vermeiden.

Der einfachste Weg, Vorlagen vorzukompilieren, ist die Verwendung von Einzeldateikomponenten – die entsprechenden Build-Einstellungen übernehmen automatisch die Vorkompilierung, sodass der erstellte Code bereits die kompilierte Rendering-Funktion anstelle der ursprünglichen Vorlagenzeichenfolge enthält .

Wenn Sie Webpack verwenden und JavaScript- und Vorlagendateien trennen möchten, können Sie vue-template-loader verwenden, der während des Erstellungsprozesses auch Vorlagendateien in JavaScript-Rendering-Funktionen konvertieren kann.


Extrahieren Sie das CSS der Komponente

Bei Verwendung einer einzelnen Dateikomponente wird die CSS wird dynamisch über JavaScript in Form von <style>-Tags eingefügt. Dies hat einen geringen Laufzeitaufwand zur Folge, und wenn Sie serverseitiges Rendering verwenden, kann es zu einer Zeitspanne mit „unformatiertem Inhaltsflimmern (fouc)“ kommen. Das Extrahieren des CSS für alle Komponenten in dieselbe Datei vermeidet dieses Problem und ermöglicht außerdem eine bessere Minimierung und Zwischenspeicherung des CSS.

Schauen Sie sich die entsprechende Dokumentation für dieses Build-Tool an, um mehr zu erfahren:


Laufzeitfehler verfolgen

Wenn beim Rendern der Komponente ein Laufzeitfehler auftritt, wird der Fehler an die globale Vue.config.errorHandler-Konfiguration übergeben Funktion (falls gesetzt). Es empfiehlt sich, diese Hook-Funktion mit einem Fehlerverfolgungsdienst zu verwenden. Zum Beispiel Sentry, das die offizielle Integration für Vue bietet.