vue.config.js からプロジェクト最適化までの vue2.x 構成

vue.config.js はオプションの設定ファイルです。このファイルがプロジェクトのルートディレクトリ (package.json と同じレベル) に存在する場合、@vue/cli-service によって自動的に読み込まれます。 package.json の vue フィールドを使用することもできますが、この方法では JSON 形式に厳密に従う必要があることに注意してください。

序文

最適化は実際のプロジェクトでも頻繁に行う必要があるものです。特に中規模・大規模プロジェクトでは、パッケージサイズの削減や初回画面の読み込み時間の短縮が必須です。面接でも頻繁に聞かれる質問です。この記事では、vue.config.js の設定とプロジェクトの最適化前後の効果を紹介します。
主にVueフロントエンドの最適化に適しています。CDN、ルート遅延読み込み、画像圧縮、GIZP圧縮を通じて、サーバーに展開されたフロントエンドプロジェクトのパッケージサイズを削減できます。パッケージサイズはプロジェクトの最初のオープン速度に直接影響し、フロントエンドのファイルサイズが小さくなるため、CSSファイルとJSファイルも小さくなり、ダウンロード速度が速くなり、Webページの読み込み速度も速くなり、最終的にフロントエンドプロジェクトの最適化の目的を達成できます。

vue.config.js 構成オプション

ファイルはオプションを含むオブジェクトをエクスポートする必要があります

ここに画像の説明を挿入

設定オプション

よく使用される構成を次に示します。

ページ:アプリケーションのエントリファイルアドレスを設定します
outputDir:生成された本番環境ビルドファイルのディレクトリ
configureWebpack:シンプルなパッケージ構成。スキャフォールディングには webpack が組み込まれているため、パッケージコマンドを変更せずに、ここでパッケージパラメータをカスタマイズできます。オブジェクトまたは矢印関数にすることができます。注:これら 2 つの形式が同時に存在する場合、後者が前者を上書きするため、表示されている形式のみを使用できます。
chainWebpack:チェーン操作のWebpack設定は関数です
devServer:プロキシ構成、サービスポート設定。設定されていない場合、デフォルトのポートは 8080 です。

詳細な設定手順については公式ウェブサイトをご覧ください。

パッケージサイズを縮小するためのパッケージの最適化

通常のパッケージングにはデフォルトの構成があり、変更せずにパッケージングを成功させることができますが、パッケージのサイズが大きくなります。

Vue スキャフォールディングに付属する分析ツールを使用して、最適化前の状況を確認し、コマンドラインに次のように入力します。

ビューUI

これは私自身のプロジェクトのフロントエンド部分のパッケージ分析です

ここに画像の説明を挿入

画像とビデオの圧縮

最適化できる画像ファイルとビデオファイルは 3 つあることがわかります。このうち MP4 は、解像度を維持するための圧縮が難しいため、一時的に無視されています。
オンライン画像圧縮ウェブサイトで画像を圧縮すると、圧縮率は悪くない

ここに画像の説明を挿入

コンパイル時に依存関係を使用して再度圧縮することもできます: image-webpack-loader

...
チェーンWebpack: config => {
    // 画像を圧縮する config.module
    .rule('画像')
    .use('イメージウェブパックローダー')
    .loader('イメージwebpackローダー')
    .オプション({
      //{ バイパスオンデバッグ: true }
      mozjpeg: { progressive: true, quality: 65 }, // JPEG画像を圧縮する
      optipng: { enabled: false }, // PNG画像を圧縮する
      pngquant: { quality: [0.65, 0.9], speed: 4 }, // PNG画像を圧縮する
      gifsicle: { interlaced: false } // GIF画像を圧縮する
      // webp: { quality: 75 } // SVG画像を圧縮する
    })
    。終わり（）
}
...

jsコード圧縮

コード圧縮には依存関係が必要です: uglifyjs-webpack-plugin

cnpm i -D muglifyjs-webpack-プラグイン

パッケージ化時にスペースが処理されるため、本番環境ではコンソールとコメントを削除することがこのプラグインを使用する目的です。
注意:このプラグインを使用するとコンパイル時間が長くなるため、実稼働環境で使用することをお勧めします。

...
Webpack を構成する: {
...
	process.env.NODE_ENV === 'production'
      ?新しいUglifyJsPlugin({
          醜いオプション: {
            出力: {
              // コメントを削除する comments: false
            },
            圧縮: {
              drop_console: true、
              drop_console: true //コンソールステートメントをクリアする // pure_funcs: ['console.log'] //カスタム削除関数}
          },
          ソースマップ: false
        })
      : () => {} ...
}
、、、

CDNアクセラレーション

通常の webpack パッケージ化では、chunk-vendors.js ファイルが生成されます。これは、独自のものではなく、他社から提供されたすべてのモジュールをバンドルしたバンドルです。これらはサードパーティモジュールまたはベンダーモジュールと呼ばれます。つまり、project/node_modules ディレクトリのすべてのモジュールです。したがって、依存モジュールがどんどん追加され、モジュールが大きくなると、chunk-vendors.js もどんどん大きくなります。

私たちが独自に作成した Web サイトを他の人が使用できるようにサーバー上に公開する必要がある場合、ユーザーが Web サイトにアクセスする速度を速めるにはどうすればよいでしょうか。
方法は2つあります:

ドキュメントをできるだけ小さくするか、少なくすると、全体的な転送速度が向上します。
ドキュメントをエンドユーザーのできるだけ近くに保管することで、全体の伝送経路が大幅に短縮されます。

パブリッククラウドベンダーは、世界中に無数のデータセンターとサーバーを所有しています。簡単に言うと、CDN サービスとは、これらのベンダーがサーバー上のドキュメントをさまざまな地域の自社サーバーに配信することを意味します。
各領域はノードと呼ばれます。ユーザーが Web サイトにアクセスすると、ブラウザから送信されるリクエストによって、ユーザーに最も近いノードが優先的にデータを取得し、ユーザーがより高速に Web サイトにアクセスしやすくなります。
CDN の正式名称はコンテンツ配信ネットワークです。CDN は既存のネットワーク上に構築されるインテリジェントな仮想ネットワークです。さまざまな場所に配置されたエッジサーバーに依存し、中央プラットフォームの負荷分散、コンテンツ配信、スケジューリングなどの機能モジュールを使用して、ユーザーが近くで必要なコンテンツを取得できるようにし、ネットワークの混雑を軽減し、ユーザーのアクセス応答速度とヒット率を向上させます。 CDN の主要技術には、主にコンテンツの保存と配信技術が含まれます (参考)。

CDNの紹介

CDNが提供するサードパーティライブラリのアドレスをインポートします。ここでは、いくつかの重要で大きな依存関係を参照します: vue vuex elemenet-ui vue-router echarts axios

<!-- 公開/index.html -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.5.1/vuex.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
 <link rel="スタイルシート" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css" rel="外部 nofollow" >
 <script src="https://cdn.bootcss.com/element-ui/2.13.2/index.js"></script>
 <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
 <script src="https://cdn.bootcss.com/echarts/5.0.2/echarts.min.js"></script>

インポートしたライブラリを追加する

vue.config.jsにCDNから参照する必要がある依存ライブラリを追加します。

...
Webpack を構成する: {
...
	外部: {
	  //マウントするサードパーティライブラリの形式を指定します: サードパーティライブラリ名: 'プロジェクト内のライブラリのエイリアス'
	  // element-ui エイリアスは ELEMENT のみ使用できることに注意してください。それ以外の場合は undefined が表示されます。vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      axios: 'axios',
      echarts: 'echarts',
      '要素-ui': '要素'
	}, 
...
}
...

プロジェクト内で依存関係が使用されている場所に注釈を付ける

ヒント:プロジェクトが大きく、コメントが必要な箇所が多い場合は、まず CDN からインポートしたライブラリの package.json を削除してからプロジェクトを実行することをお勧めします。モジュールが不足していることが確実に通知され、通知された箇所にコメントが記入されるため、漏れがなくなります。

ここに画像の説明を挿入

起こりうるエラー

element-ui のエイリアスは 'ELEMENT' にのみ設定できます。オンデマンドでインポートする場合は、ELEMENT.Message...error(...) を使用します。変更しようとしましたが、xxx が未定義であると報告されます。

大きなファイルの場所の比較

CDN の前後における大容量ファイルの分布を比較する

CDN アクセラレーション前:

ここに画像の説明を挿入

CDN アクセラレーション後:

ここに画像の説明を挿入

ファイルサイズははるかに小さく、基本的に大きな依存関係はありません。

結果

ここに画像の説明を挿入

比較すると、前後の効果は非常に明白です

最初の画面の読み込み時間の最適化

上記のプロセスは、実際には最初の画面の読み込み時間を最適化していますが、最初の画面の読み込み時間をさらに最適化することができます。

上記のパッケージ最適化のみを実行した場合、最初のスクリーンタイムが比較されます。
最適化前の読み込み時間は 1.92 秒でしたが、最適化後は 1.26 秒になりました。読み込まれるリソースも大幅に削減されました。つまり、改善は明らかです。

ここに画像の説明を挿入

CDN を使用しているため、要件の数が増えました。

ルーティング遅延読み込みの最適化

意味

遅延読み込みとは、ルートの読み込みを遅らせたり、オンデマンドでルートを読み込む、つまり必要なときに読み込み、必要のないときには読み込まないことを意味します。これにより、プロジェクト Web ページの読み込み速度を高速化できます。

一般的な実装方法

1. Vue非同期コンポーネントはルートの遅延読み込みを実現します

コンポーネント:resolve=>(['ロードするルートのアドレス',resolv])

2. es が提案したインポート (推奨)

// 次の 2 行のコードでは、webpackChunkName は指定されておらず、各コンポーネントは js ファイルにパッケージ化されています。
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 次の 3 行のコードは同じ webpackChunkName を指定し、1 つの js ファイルに結合されてパッケージ化されます。 コンポーネントをグループに分割する const Home = () => import(/* webpackChunkName: 'visualization' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'visualization' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'visualization' */ '@/components/about')

私のプロジェクトのパッケージングを例に挙げると、webpackChunkNameを指定せずにパッケージ化されたjsフォルダには17個のファイルがあります。

ここに画像の説明を挿入

2つのページルートを同じwebpackChunkNameとして指定した後、展開されたフォルダーは16個だけになります。

ここに画像の説明を挿入

理由は、同じwebpackChunkNameが結合され、1つのjsファイルにパッケージ化されるためです。

gzip 圧縮の最適化

簡単に言うと、gzip はファイルをパッケージ化した後に圧縮して、サイズを小さくし、転送速度を速めます。その結果、URL をクリックすると、関連するコンテンツがすぐに表示されます。ただし、すべてのブラウザーが gzip をサポートしているわけではありません。クライアントが gzip をサポートしているかどうかを知りたい場合は、圧縮のサポートを示す Accept-Encoding がリクエストヘッダーにあります。クライアントの http リクエストヘッダーは、ブラウザーでサポートされている圧縮方法を宣言し、サーバーは有効にする圧縮、圧縮ファイルの種類、および圧縮方法を構成します。クライアントがサーバーにリクエストを行うと、サーバーはリクエストヘッダーを解析します。クライアントが gzip 圧縮をサポートしている場合、リクエストされたリソースは圧縮され、応答としてクライアントに返されます。ブラウザーはそれを独自の方法で解析します。http 応答ヘッダーには content-encoding:gzip が表示されており、これはサーバーが gzip 圧縮を使用していることを意味します。

ここに画像の説明を挿入

フロントエンドでGZIPを有効にする

ここではプラグインが必要です: compression-webpack-plugin

npm インストール圧縮 webpack プラグイン

vue.config.jsで設定する

Webpack を構成する: {
...
新しい圧縮プラグイン({
   ファイル名: '[パス].gz[クエリ]',
   アルゴリズム: 'gzip'、
   テスト: /\.js$|\.html$|\.css/,
   しきい値: 10240, // この値より大きいリソースのみが処理されます 10240
   minRatio: 0.8, // この値より低い圧縮率のリソースのみが処理されます // 元のファイルを削除します // 開発環境で使用する場合は false に設定してください。そうしないと、編集後にページが開きません // 本番環境で使用する場合は true に設定してください。そうすると、パッケージ化されたサイズが小さくなります deleteOriginalAssets: false 
}）、
...
}
、、、
// gzip 圧縮

サーバーのnginxでGZIP圧縮を有効にする

ここに画像の説明を挿入

GZIP圧縮が正常に有効化されているかどうかを確認します

ここに画像の説明を挿入

参考文献

Vue プロジェクト最適化ドキュメント
vue.config.js パッケージ最適化フロントエンドパフォーマンス最適化 gzip

vue.config.js の設定からプロジェクトの最適化まで、vue2.x に関するこの記事はこれで終わりです。より関連性の高い vue プロジェクトの最適化コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: