v3.x のドキュメントを見たい場合はこちら

ガイド

v2.x 以前のドキュメントです。 v3.x のドキュメントを見たい場合はこちら

プロダクション環境への配信

最終更新日: 2018年12月22日

以降のヒントのほとんどは、Vue CLI を使っていればデフォルトで有効になります。このセクションは、あなたが独自のビルドセットアップを使っている場合のみ関係があります。

プロダクションモードを有効にする

開発中、Vue は一般的なエラーや落とし穴に役立つ多くの警告を表示します。しかし、これらの警告文字列は、プロダクション環境では役に立たなくなり、アプリケーションのペイロードサイズが大きくなります。さらに、これらの警告チェックの中には、運用モードで回避できるランタイムコストが小さいものがあります。

ビルドツールなし

完全ビルドを使用している場合、つまりビルドツールなしで直接スクリプトタグを使用して Vue を組み込む場合は、縮小バージョン (vue.min.js) をプロダクション用に使用してください。 いずれのバージョンもインストールガイド中にあります。

ビルドツールあり

Webpack や Browserify のようなビルドツールを使用する場合、プロダクションモードは Vue のソースコード内の process.env.NODE_ENV によって決定され、デフォルトで開発モードになります。どちらのビルドツールも、この変数を上書きして Vue のプロダクションモードを有効にする方法を提供します。ビルド中に警告が縮小ツール (minifier) によって取り除かれます。全ての 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

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

Rollup

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

const replace = require('@rollup/plugin-replace')

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

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

DOM 内のテンプレートまたは JavaScript 内のテンプレート文字列を使用する場合、テンプレートから描画関数へのコンパイルはその場 (on the fly) で実行されます。通常、ほとんどの場合、これは十分高速ですが、アプリケーションのパフォーマンスが重要な場合は避けるのが最善です。

テンプレートをプリコンパイルする最も簡単な方法は、単一ファイルコンポーネントを使用することです。関連するビルドのセットアップは自動的にプリコンパイルを実行するため、ビルドされたコードには生のテンプレート文字列ではなくすでにコンパイルされた描画関数が含まれています。

Webpack を使用している場合、JavaScript と テンプレートの分離を好むなら、ビルドステップ中にテンプレートファイルを JavaScript 描画関数に変換する vue-template-loader を使用することができます。

コンポーネント CSS の抽出

単一ファイルコンポーネントを使用する場合、コンポーネント内の CSS は JavaScript を介して <style> タグとして動的に挿入されます。これは実行時のコストが低く、サーバー側のレンダリングを使用している場合は、”スタイルのないコンテンツのフラッシュ”が発生します。すべてのコンポーネントにわたって CSS を同じファイルに抽出し、これらの問題を回避するには、より良い CSS の縮小化 (minification) とキャッシングをするのがより良いです。

それぞれのビルドツールのドキュメントを参照してください:

ランタイムエラーの追跡

コンポーネントの描画中にエラーが発生した場合、グローバルな Vue.config.errorHandler 関数に設定された関数にそれが渡されます。このフックを Vue 向けに公式に統合された Sentry のようなエラー追跡サービスと共に使用することは良いアイデアです。

← TypeScript のサポート ルーティング →
間違いを見つけた、またはドキュメントに貢献したいですか？ GitHub で編集しましょう！ このサイトは Netlify でホストされています。