So ändern Sie die Vue-Produktionsumgebung

Vue ist ein beliebtes JavaScript-Framework zum Erstellen moderner Webanwendungen. In der Entwicklungsumgebung von Vue können wir ganz einfach die Vue-CLI (Befehlszeilenschnittstelle) verwenden, um Vue-Anwendungen zu erstellen und zu entwickeln. Vue CLI verfügt über viele nützliche Funktionen, von denen eine die Entwicklung und Bereitstellung innerhalb von Vue-Anwendungen ermöglicht. In diesem Artikel werfen wir einen genaueren Blick darauf, wie Sie Änderungen in einer Vue-Produktionsumgebung vornehmen.

Vues Produktionsumgebungskompilierung und Entwicklungsumgebungskompilierung sind unterschiedlich. Der größte Unterschied ist die Leistung.

Wenn wir in der Entwicklungsumgebung eine Vue-Anwendung mit Vue CLI erstellen, erhalten wir einen Hot-Reload-Server, sodass wir die aktualisierten Ergebnisse sofort sehen können, wenn sich der Code ändert. Dies ist sehr nützlich beim Entwickeln und Testen innerhalb von Vue-Anwendungen.

Aber wenn wir die Vue-Anwendung in der Produktionsumgebung bereitstellen, müssen wir einige Änderungen vornehmen, um ihre Leistung zu optimieren. Hier sind einige Möglichkeiten, Änderungen in einer Vue-Produktionsumgebung vorzunehmen:

1. Laden Sie die Produktionsversion von Vue in Ihre Anwendung.

In der Entwicklungsumgebung verwenden wir für die Entwicklung die Vollversion von Vue, da diese alle Warnungen und Debugging-Informationen enthält. In einer Produktionsumgebung benötigen wir diese Informationen jedoch nicht, da sie die Belastung der Anwendung erhöhen und die Leistung verringern. Daher sollten wir die Produktionsversion von Vue verwenden.

Die Produktionsversion von Vue kann mit dem folgenden Befehl in der Vue-CLI in die Anwendung geladen werden:

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false // 阻止启动生产消息

new Vue({
  render: h => h(App),
}).$mount('#app')

Im obigen Code setzen wir Vue.config.produktionTip = false, um zu verhindern, dass Vue eine Nachricht im Produktionsmodus startet.

2. Gzip-Komprimierung aktivieren

In einer Produktionsumgebung sollten wir die Gzip-Komprimierung aktivieren, um die Größe von HTTP-Antworten zu reduzieren und das Laden von Anwendungen zu beschleunigen. Die Gzip-Komprimierungsfunktion kann mit Webpack konfiguriert und in vue.config.js konfiguriert werden.

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
};

Im obigen Code verwenden wir das Plug-In „CompressionWebpackPlugin“, um die Gzip-Komprimierungsfunktion zu aktivieren.

3. Konsolen- und Debug-Anweisungen entfernen

In einer Produktionsumgebung sollten wir alle Konsolen- und Debug-Anweisungen in der Anwendung entfernen. Diese Anweisungen erhöhen die Größe der Anwendung und können auch Sicherheitsrisiken bergen. Diese Anweisungen können mit UglifyJSPlugin aus dem Webpack aus der Anwendung entfernt werden.

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new UglifyJSPlugin({
        uglifyOptions: {
          compress: {
            drop_console: true, // 移除所有的console语句
          },
        },
      }),
    ],
  },
};

Im obigen Code verwenden wir das UglifyJSPlugin-Plug-in, um die Konsolenanweisung in der Anwendung zu löschen.

4. CDN-Beschleunigung statischer Ressourcen

In einer Produktionsumgebung sollten wir unsere statischen Ressourcen auf CDN legen, um die Ladegeschwindigkeit der Anwendung zu verbessern. CDN kann mithilfe des Webpacks innerhalb der Anwendung konfiguriert werden.

// vue.config.js
module.exports = {
    chainWebpack: config => {
      config.plugin('html')
        .tap(args => {
          args[0].cdn = process.env.NODE_ENV === 'production' ? cdn.build : cdn.dev
          return args
        })
    }
};

Im obigen Code verwenden wir chainWebpack, um das Webpack zu erweitern, und verwenden args[0].cdn, um die URL-Adresse des CDN bereitzustellen.

Zusammenfassung

Das Vornehmen von Änderungen in der Vue-Produktionsumgebung dient dazu, die Leistung unserer Anwendung zu verbessern. In diesem Artikel haben wir die folgenden Methoden kennengelernt:

• Laden Sie die Produktionsversion von Vue in die Anwendung.
• Aktivieren Sie die Gzip-Komprimierung.
• Entfernen Sie Konsolen- und Debug-Anweisungen.
• Beschleunigen Sie statische Ressourcen durch CDN.

Ich hoffe, diese Methoden helfen Ihnen, Ihre Vue-Anwendung zu optimieren und dafür zu sorgen, dass sie in einer Produktionsumgebung besser läuft.

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Vue-Produktionsumgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!