本番環境の展開


#Vue CLI を使用すると、次のほとんどがデフォルトで有効になります。このセクションは、カスタム ビルド設定にのみ関係します。


#ディレクトリ

    ##運用環境モードを有効にする

  • #ビルド ツールを使用しない場合

    • ビルド ツールを使用する

      • ##テンプレートのプリコンパイル

  • コンポーネントの CSS の抽出

  • ランタイム エラーのトレース

    • ##実稼働環境モードを有効にする


開発環境では、Vue は一般的なエラーやトラップに対処するのに役立つ多くの警告を提供します。運用環境では、これらの警告ステートメントは役に立ちませんが、アプリケーションのサイズが増加します。さらに、一部の警告チェックには実行時のオーバーヘッドがわずかですが、運用モードでは回避できます。

#ビルド ツールを使用しないでください


Vue の完全な独立バージョンを使用する場合

<script>

要素は、事前にビルドせずに Vue に導入されます。運用環境では、圧縮バージョン (vue.min.js) を使用することを忘れないでください。 。どちらのバージョンも、インストール ガイドに記載されています。

ビルド ツールの使用


webpack や Browserify などのビルド ツールを使用すると、Vue のソース コードは次のようになります。

process.env.NODE_ENV

に従って実稼働環境モードを有効にするかどうかを決定します。デフォルトは開発環境モードです。 webpack と Browserify には、この変数をオーバーライドして Vue の実稼働環境モードを有効にするメソッドがあり、警告ステートメントもビルド プロセス中に圧縮ツールによって削除されます。これらはすべて vue-cli テンプレートで事前に設定されていますが、その設定方法を知っておくとよいでしょう。

webpack

webpack 4 では、mode オプションを使用できます: 

module.exports = {
  mode: 'production'
}

ただし、webpack 3 以降では、それより前のバージョンでは、パッケージ化コマンドを実行するときに DefinePlugin: 

var webpack = require('webpack')

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

Browserify

を使用する必要があります。 # は

"production"

に設定されます。これは、ホット リロードや開発関連のコードの導入を避けるように vueify に指示するのと同じです。

  • パッケージ化されたファイルに対してグローバル envify 変換を実行します。これにより、圧縮ツールは、Vue ソース コード内の環境変数条件にラップされたすべての警告ステートメントを削除できます。例: 

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

    • または、Gulp で envify を使用します: 

    // 使用 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

    rollup-plugin-replace を使用します: 

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


    #テンプレートのプリコンパイル

    #DOM 内のテンプレートまたは JavaScript 内の文字列テンプレートを使用する場合、テンプレートは実行時にレンダリング関数にコンパイルされます。通常、このプロセスは十分高速ですが、パフォーマンスを重視するアプリケーションでは、この使用を避けることが最善です。

    テンプレートをプリコンパイルする最も簡単な方法は、

    単一ファイル コンポーネント

    を使用することです。関連するビルド設定が自動的にプリコンパイルを処理するため、ビルドされたコードには、元のテンプレート文字列の代わりにコンパイルされたレンダリング関数がすでに含まれています。 。 webpack を使用し、JavaScript ファイルとテンプレート ファイルを分離したい場合は、

    vue-template-loader

    を使用できます。これにより、ビルド プロセス中にテンプレート ファイルを JavaScript レンダリング関数に変換することもできます。


    #コンポーネントの CSS を抽出する

    単一のファイル コンポーネントを使用する場合、 CSS は、JavaScript を介して

    <style>
    タグの形式で動的に挿入されます。これには実行時の多少のオーバーヘッドがあり、サーバー側レンダリングを使用すると、一定期間「スタイルのないコンテンツのちらつき (fouc)」が発生する可能性があります。すべてのコンポーネントの CSS を同じファイルに抽出すると、この問題が回避され、CSS をより適切に縮小してキャッシュできるようになります。

    詳細については、このビルド ツールの各ドキュメントを確認してください:

      webpack vue-loader
    • (

      vue-cli##) # Webpack テンプレートは事前に設定されています)#Browserify vueify

    • #Rollup rollup-plugin-vue

    • ランタイム エラーの追跡

      #コンポーネントのレンダリング時にランタイム エラーが発生した場合、エラーはグローバルに渡されます Vue.config .errorHandler 設定関数 (設定されている場合)。このフック関数をエラー追跡サービスで使用することをお勧めします。たとえば、Sentry は、Vue の 公式統合 を提供します。