vue本番環境を変更する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

王林

May 23, 2023 pm 08:13 PM

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

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

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

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

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 の実行中本番モードでメッセージを開始します。

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 圧縮機能を有効にしています。

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

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

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

ログイン後にコピー

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

静的リソースの 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 の製品バージョンをアプリケーションに組み込みます。