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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue2.0 と DataTable プラグインを組み合わせてテーブルを動的に更新する方法の詳細な説明
  • vue3とvue2の利点の比較
  • Vue2.0/3.0 での provide と inject の使用例
  • Vue2.xは、ユーザーのログインと終了を実装するためにルーティングナビゲーションガードを設定します。
  • vue2.x の徹底研究 - h 関数の説明
  • Vue2.x の応答性の簡単な説明と例
  • Vue3とVue2の利点のまとめ
  • Vue2は応答性を提供するためにprovide injectを実装しています
  • レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析
  • 手書きの Vue2.0 データハイジャックの例
  • Vue2.x - アンチシェイクとスロットリングの使用例
  • ソースコードから、Vue2がデータとメソッドを直接取得できる理由がわかる

<<:  Linux 上での Go 環境の構築のインストールと設定の説明

>>:  Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成

推薦する

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...

iframe の多層ネスト、無制限のネスト、高度に適応したソリューション

ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...

IIS7 IIS8 http は自動的に HTTPS にジャンプします (ポート 80 はポート 443 にジャンプします)

IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...

CentOS7 で MySQL 5.7.24 をコンパイルしてインストールする詳細なチュートリアル

目次依存関係をインストールするブーストをインストールMySQLをコンパイルしてインストールする構成依...

JavaScript 型検出方法の例のチュートリアル

序文JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーシ...

圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法

JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...

nginx リバース プロキシでの proxy_pass の実装

フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...

Web面接でよくある質問:リフローとリペイントの原理と違い

目次ブラウザのレンダリングメカニズムリフローと再塗装リフロー逆流を引き起こす行為:再描画再描画を引き...

CSS3 アドバンス LESS で星空アニメーションを実装するサンプルコード

この記事では、星空アニメーションを実現するための高度な CSS3 LESS のサンプルコードを次のよ...

JavaScript の基礎: 即時実行関数

目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...

CSSでフレックス配置を表示する(レイアウトツール)

display: flex レイアウトに関しては、深く理解している人もいますし、私も他の人の作業か...

Javascriptを使用して滑らかな曲線を生成する方法

目次序文ベジェ曲線の紹介二次ベジェ曲線3次ベジェ曲線ベジェ曲線計算機能フィッティングアルゴリズム付録...

Js クラスの構築と継承のケースの詳細な説明

JS のクラスの定義や継承は本当に多様なので、別のノートブックを開いて記録しておきます。意味オブジェ...

値の転送を実現するために、2つの同じレベルのコンポーネントをVueで作成します。

Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません...

Dockerコンテナ内の設定ファイルの変更の実装

1. コンテナに入るdocker run [オプション] イメージ名 [起動コンテナに渡されるコマン...