vue本番環境を変更する方法

Vue は、最新の Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue の開発環境では、Vue CLI (コマンド ライン インターフェイス) を使用して、Vue アプリケーションを簡単に作成および開発できます。 Vue CLI には多くの便利な機能があり、その 1 つは Vue アプリケーションの開発とデプロイを可能にします。この記事では、Vue 運用環境で変更を加える方法を詳しく見ていきます。

Vue の本番環境のコンパイルと開発環境のコンパイルは異なり、最大の違いはパフォーマンスです。

開発環境では、Vue CLI を使用して Vue アプリケーションを構築すると、コードが変更されたときに更新された結果をすぐに確認できるように、ホット リロード サーバーが取得されます。これは、Vue アプリケーション内で開発およびテストする場合に非常に役立ちます。

ただし、Vue アプリケーションを運用環境にデプロイする場合は、パフォーマンスを最適化するためにいくつかの変更を加える必要があります。 Vue の実稼働環境で変更を加える方法は次のとおりです。

1. Vue の実稼働バージョンをアプリケーションにロードします。

開発環境では、すべての警告とデバッグ情報が含まれる完全バージョンの Vue を開発に使用します。ただし、運用環境では、アプリケーションの負荷が増加し、パフォーマンスが低下するため、この情報は必要ありません。したがって、Vue の製品バージョンを使用する必要があります。

Vue CLI で次のコマンドを使用して、Vue の実稼働バージョンをアプリケーションにロードできます:

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

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

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

上記のコードでは、これを防ぐために Vue.config.productionTip = false を設定しています。 Vue の実行中 本番モードでメッセージを開始します。

2. Gzip 圧縮を有効にする

運用環境では、HTTP 応答のサイズを削減し、アプリケーションの読み込みを高速化するために、Gzip 圧縮を有効にする必要があります。 Gzip 圧縮機能は webpack を使用して構成でき、vue.config.js で構成できます。

// 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,
      }),
    ],
  },
};

上記のコードでは、CompressionWebpackPlugin プラグインを使用して Gzip 圧縮機能を有効にしています。

3. コンソール ステートメントとデバッグ ステートメントを削除する

運用環境では、アプリケーション内のすべてのコンソール ステートメントとデバッグ ステートメントを削除する必要があります。これらのステートメントによりアプリケーションのサイズが増大し、セキュリティ上のリスクが生じる可能性もあります。これらのステートメントは、Webpack の UglifyJSPlugin を使用してアプリケーションから削除できます。

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

上記のコードでは、UglifyJSPlugin プラグインを使用して、アプリケーション内のコンソール ステートメントを削除します。

4. 静的リソースの CDN アクセラレーション

運用環境では、アプリケーションの読み込み速度を向上させるために、静的リソースを CDN に配置する必要があります。 CDN は、アプリケーション内で webpack を使用して構成できます。

// 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
        })
    }
};

上記のコードでは、chainWebpack を使用して Webpack を拡張し、args[0].cdn を使用して CDN の URL アドレスを提供します。

概要

Vue 運用環境で変更を加えることで、アプリケーションのパフォーマンスが向上します。この記事では、次の方法を学習しました。 Vue の製品バージョンをアプリケーションに組み込みます。

Gzip 圧縮を有効にします。
• コンソールとデバッグステートメントを削除します。
• CDN を通じて静的リソースを高速化します。
• これらの方法が、Vue アプリケーションを最適化し、運用環境での動作を改善するのに役立つことを願っています。

以上がvue本番環境を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。