Vue - プロジェクトのコンパイル速度、パフォーマンスの最適化、パッケージング量の最適化

GitHub デモ アドレスの
オンライン プレビュー

webpack 中国語ドキュメント

記事:
プロジェクトの最適化方法とメリットとデメリット
HardSourceWebpackPlugin の設定とその他の最適化ソリューション
Vue プロジェクトのパフォーマンス最適化ソリューションの共有Vue の最初のレビューの読み込み速度とホワイト スクリーン時間の最適化
を最適化するために vue-cli プロジェクトでできることの
詳細な説明

webpack5 と webpack4 の違いは何ですか?
Webpack5 アップグレード ガイド (完全なパッケージ パフォーマンス最適化ガイド付き)

順序

個人的には、適切な最適化プランを選択するのが良いと思います。すべてを使用する必要はなく、ビジネス コードの最適化により多くの時間を費やすことができます。
プロジェクト環境はwebpack4xをベースにしていますので古いものもあるかもしれません、ご自身で判断してください
下面的方法只有部分使用，更多的是一种记录！！！

Webpack のバージョンを確認するnpm list webpack
または、以下に示すように、node_modules ディレクトリで webpack/package.json ファイルを見つけて、ファイル内のバージョンを確認することもできます。

1. コンパイル速度の最適化

コンパイルの最適化に関する記事:
Vue プロジェクトのコンパイルと実行が遅すぎる コンパイルの速度を改善する方法 (コンパイルにはコンパイルの実行とパッケージのコンパイルが含まれます) 開発プロセス中、
vue プロジェクトの保存とコンパイルが遅くなります 最適化方法
webpack5. マルチの設定- ビルドを高速化するためのスレッド化とキャッシュ。

1. キャッシュを使用する

• webpack3ではビルド速度を向上させるために、DllPluginやDllReferencePluginプラグインをよく利用しますが、設定が複雑で、ファイルの更新には手動でdllを再生成する必要があり、さらに面倒です。より良い別の種類の autodll-webpack-plugin があります
• Webpack 4以降で使用可能ですHardSourceWebpackPlugin。ディスクにキャッシュを設定することでコンパイルとロードの速度が向上します。初回は通常通りコンパイルおよびキャッシュされ、2回目はキャッシュされることで、時間を80%短縮できます。 90%。インストールして使用する必要があります
• Webpack5 組み込み構成cache。

1.1. キャッシュ プラグイン - HardSourceWebpackPlugin

Hard-source-webpack-plugin プラグイン GitHub アドレス

HardSourceWebpackPlugin は、モジュールの中間キャッシュ ステップを提供する Webpack のプラグインです。結果を確認するには、このプラグインを使用して webpack を 2 回実行する必要があります。最初のビルドには通常の時間がかかります。2 番目のビルドは大幅に高速になります。
速度が約80%～90%向上

チップ：

デフォルトのキャッシュの場所:nodemodules/.cache キャッシュをクリアする必要がある場合は、キャッシュを削除して再度コンパイルできます。
HardSourceWebpackPlugin 和 speed-measure-webpack-plugin 不能一起使用 ！！！

ハードソースウェブパックプラグインをインストールする

npm install --save-dev hard-source-webpack-plugin

構成

// webpack.config.js 或 vue.config.js
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const path = require('path')

module.exports = {
    
    
  // ...
  plugins: [
     // 默认缓存位置：node_modules/.cache路径下
     new HardSourceWebpackPlugin()
     // new HardSourceWebpackPlugin({
    
    
     //   cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/hard_source_cache')
     // })
  ]
}

1.2.webpack5キャッシュの設定

webpack5組み込みのキャッシュ キャッシュ メカニズム。直接設定するだけです。
開発モードではキャッシュは type:memory に設定され、運用モードではキャッシュが無効になります。

// webpack.config.js 或 vue.config.js
const path = require('path')
module.exports = {
    
    
  transpileDependencies: true,
  configureWebpack: {
    
    
    cache: {
    
    
      type: 'filesystem',
      // cacheDirectory: path.resolve(__dirname, '.webpack_cache') // 设置缓存目录(根路径下)
      cacheDirectory: path.join(__dirname, 'node_modules/.cache/webpack_cache') // 设置缓存目录(node_modules/.cache路径下)
    }
  }
}

1.3. キャッシュローダープラグイン

最初のものと同様に、ここでは詳細には触れません。

Hard-source-webpack-plugin のインストール前とインストール後の比較

最初のコンパイル 36340ms

2 回目のコンパイル 3760ms

2. ソースマップの適切な使用

ProductionSourceMap の役割は、問題を特定することです。パッケージ化中に .map ファイルが生成されます。実稼働環境では、出力情報の特定の行をブラウザで表示できますが、対応するパッケージのサイズも増加します。ビルド速度にも影響します。 false に設定すると、.map ファイルは生成されません。productionSourceMap を
false に設定すると、パッケージ サイズを削減できるだけでなく、ソース コードも暗号化できます。

module.exports = {
    
    
  productionSourceMap: false
}

3. マルチスレッドのパッケージ化

3.1、スレッドローダー

記事
[Webpack パフォーマンス最適化シリーズ (9) - マルチプロセス パッケージ化] により、プロジェクトのパッケージ化と構築の速度が大幅に向上します

Thread-loader は Webpack のローダーで、負荷の高い作業をワーカー プールに入れて実行し、ビルド速度を向上させることができます。
たとえば、Vue.js プロジェクトをビルドする場合、.vue 単一ファイル コンポーネントのコンパイル、テンプレートの解析、その他の操作が必要なため、特に大規模なプロジェクトの場合、ビルド時間が非常に長くなる可能性があります。スレッドローダーを使用してワーカー プールでこれらの操作を実行すると、ビルド時間が大幅に短縮されます。

このローダーを使用する場合は、他のローダーの前に配置する必要があります。このローダーの後に配置されたローダーは、別のワーカー プールで実行されます。
ワーカー プールで実行されるローダーは制限されています。たとえば、
これらのローダーは新しいファイルを生成できません。
これらのローダーはカスタム ローダー API を使用できません (つまり、プラグインを通じてカスタマイズできません)。
これらのローダーは Webpack 構成を取得できません。
各ワーカーは独立した Node.js プロセスであり、そのオーバーヘッドは約 600 ミリ秒です。同時に、プロセス間のデータ交換が制限されます。
このローダーは時間のかかる操作にのみ使用してください。

スレッドローダーはすべてのシナリオに適しているわけではなく、一部の高価なタスクにのみ有効であることに注意してください。タスク自体が非常に高速で単純な場合、スレッドローダーを使用すると、メインスレッドで直接実行するよりも遅くなる可能性があります。

インストール

 npm install thread-loader --save-dev

以下は、スレッドローダーの使用例です (node_modules 内のファイルを除く、すべての .js および .vue ファイルに適用されます)。

webpack.config.js

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.js$/,
        include: path.resolve('src'),
        exclude: /node_modules/,
        use: [
          'thread-loader', // 将后续 loader 放在 worker 池中执行
          // 耗时的 loader （例如 babel-loader）
          'babel-loader'
        ]
      }
    ]
  }
}

view.config.js

module.exports = {
    
    
  // ... 
  configureWebpack: {
    
    
    module: {
    
    
      rules: [
        {
    
    
          test: /\.js$/,
          include: path.resolve('src'),
          exclude: /node_modules/,
          use: [
            'thread-loader', // 将后续 loader 放在 worker 池中执行
            // 耗时的 loader （例如 babel-loader）
            'babel-loader'
          ]
        }
      ]
    }
  }
}

オプション

use: [
  {
    
    
    loader: "thread-loader",
    // 有同样配置的 loader 会共享一个 worker 池
    options: {
    
    
      // 产生的 worker 的数量，默认是 (cpu 核心数 - 1)，或者，
      // 在 require('os').cpus() 是 undefined 时回退至 1
      workers: 2,

      // 一个 worker 进程中并行执行工作的数量
      // 默认为 20
      workerParallelJobs: 50,

      // 额外的 node.js 参数
      workerNodeArgs: ['--max-old-space-size=1024'],

      // 允许重新生成一个僵死的 work 池
      // 这个过程会降低整体编译速度
      // 并且开发环境应该设置为 false
      poolRespawn: false,

      // 闲置时定时删除 worker 进程
      // 默认为 500（ms）
      // 可以设置为无穷大，这样在监视模式(--watch)下可以保持 worker 持续存在
      poolTimeout: 2000,

      // 池分配给 worker 的工作数量
      // 默认为 200
      // 降低这个数值会降低总体的效率，但是会提升工作分布更均一
      poolParallelJobs: 50,

      // 池的名称
      // 可以修改名称来创建其余选项都一样的池
      name: "my-pool"
    },
  },
  // 耗时的 loader（例如 babel-loader）
];

3.2、パラレルウェブパック

Parallel-webpack は Webpack に基づくプラグインで、ビルド タスクを複数のサブプロセスに分割して並列実行し、ビルド速度を向上させることができます。他の同様のプラグインと比較した場合、Parallel-webpack の最大の特徴は、ローダーとプラグインに限定されず、非同期および同期モジュールの並列処理をサポートしていることです。

npm install --save-dev parallel-webpack

// webpack.config.js
const ParallelWebpack = require('parallel-webpack').Plugin

module.exports = {
    
    
  // ...
  plugins: [
    new ParallelWebpack({
    
    
      // 配置选项
    }),
    /* 其他插件 */
  ],
  // ...
}

上記の構成により、Parallel-Webpack プラグインがマルチプロセス パッケージ化を実現できるようになります。構成オプションで、ニーズに応じてプラグインを構成できます。

マルチスレッド パッケージングを使用すると、システムの CPU とメモリの消費量が増加する可能性があることに注意してください。そのため、マシンのパフォーマンスに合わせてスレッド数を調整し、マルチスレッド パッケージングの効果をテストすることをお勧めします。ビルド時間とビルドプロセス、CPU とメモリの消費量。

3.3、ハッピーパック

HappyPack は Webpack のマルチスレッド コンパイル用のツールで、複雑なローダーまたはプラグイン タスクを複数のサブプロセスに分解して並列実行し、ビルドを高速化できます。

npm install happypack --save-dev

const HappyPack = require('happypack');

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'happypack/loader?id=js'
      }
    ]
  },
  plugins: [
    new HappyPack({
    
    
      id: 'js',
      threads: 4,
      loaders: ['babel-loader']
    })
  ],
  // ...
};

上記のコードでは、js という名前の HappyPack インスタンスを定義し、4 つのスレッドを使用して、babel-loader によって並列処理される JavaScript ファイルをコンパイルします。

注：2和3插件相关的代码没有经过实际使用测试效果！！！

4. ホットアップデート/ホットリプレースを有効にする

webpack 中国語ドキュメント HMR 読み込みスタイル

module.hot.accept を使用した Webpack のホット ロードとモジュール ホット リプレースメント (HMR)を使用しない場合の違い

• ホット アップデート: コード ファイルが変更されると、新しいコードが自動的にコンパイルされ、ブラウザーで実行されている JavaScript に挿入されます。ホットアップデートはページの再読み込みを行わず、変更内容の一部を更新し、ページのステータス情報を保持するため、ユーザーの操作状態を維持することができます。
• ホット リロード: コード ファイルが変更された後、できるだけ早く再コンパイル、パッケージ化して、ブラウザ ウィンドウを更新します。ホット アップデートと比較すると、ホット リロードは JavaScript コードを更新するだけでなく、ページ全体を再レンダリングするため、短いスプラッシュ画面が表示され、UI 関連の変更により適しています。
• ホット モジュール交換: ホット アップデートと似ていますが、変更された部分のみを置き換え、モジュール全体やアプリケーションを再ロードしないため、より高速でエクスペリエンスが向上します。モジュールのホット リプレースメントは、JavaScript モジュールに適用できるだけでなく、CSS、画像、その他のリソースの置き換えにも使用できます。

HotModuleReplacementPluginWebpackが提供するホットモジュールリプレイスメント(HMR)機能を有効にするプラグインです。HMRは、ページ全体を更新せずに、変更部分のみを更新できる開発モ​​ードで、開発効率が向上します。

注記：

js にのみ有効です。css
を変更する場合、ページは自動的に更新されず、変更された css のみが更新されます。

const webpack = require('webpack');

module.exports =  {
    
    
  // ...
  mode: 'development',
  devtool: 'eval-source-map', // 使用 source-map 方便调试
  devServer: {
    
    
    port: 8080,
    hot: true, // 开启 HMR 功能
    open: true // 自动打开浏览器
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // 启用 HMR 功能
  ]
}

このうち、hot オプションは true、つまり HMR 機能が有効になっており、HMR 機能を有効にするためのプラグインに HotModuleReplacementPlugin プラグインが追加されています。

js コードに次のコードを追加します。

// js 代码中添加 HMR 相关的代码
if (module.hot) {
    
    
  // 如果支持HMR,告诉 Webpack，当前模块更新不用刷新
  module.hot.accept()
  // 如果支持HMR,告诉 Webpack，当前模块更新时一定要刷新
  // module.hot.decline()
}

上記の設定により、Webpack のモジュールホットリプレース機能を有効にすることで、開発プロセス中に変更の影響をリアルタイムにプレビューすることができ、開発効率を向上させることができます。HMR 機能は開発環境でのみ使用できるため、運用環境では使用しないでください。

5.Dll プリコンパイルを使用する (DllPlugin/autodll-webpack-plugin)

DllPlugin は、頻繁に変更されないコードやサードパーティのライブラリを別のダイナミック リンク ライブラリ (DLL ファイル) にパッケージ化できる Webpack のプラグインです。これにより、コンパイルのたびにこれらのコードを再パッケージする必要がなくなり、コンパイルが改善されます。スピード。

DllPlugin を使用すると、vue、vue-router、vuex などの安定していて変更が難しいライブラリを事前にコンパイルし、ビルド ツールによるプロジェクトのコンパイル中に、事前にコンパイルされた DLL ライブラリ ファイルを直接使用できます。梱包速度の向上。

autodll-webpack-pluginの使用をお勧めします

直接使用することをお勧めしますhard-source-webpack-plugin

npm install autodll-webpack-plugin --save-dev

view.config.js

const AutoDllPlugin = require('autodll-webpack-plugin');

module.exports = {
    
    
  // ...
  plugins: [
    new AutoDllPlugin({
    
    
      inject: true,
      debug: true,
      filename: '[name]_[hash].js',
      path: './dll',
      entry: {
    
    
        vendor: [
          'vue',
          'vue-router',
          'vuex'
        ]
      }
    })
  ]
}

上記の構成では、AutoDllPlugin プラグインを使用し、次のパラメーターを渡しました。

• inject: true は、生成された DLL を HTML に自動的に参照することを意味します。
• debug: true は、デバッグ情報を Webpack ログに出力することを意味します。
• filename: '[name]_[hash].js' は生成された DLL ファイル名を表します。ここで、[name] はエントリ内のキーに対応し、[hash] はファイルのハッシュ値を表します。
• path: './dll' は、生成された DLL ファイルのストレージ パスを示します。
• エントリは、DLL にコンパイルされるサードパーティ ライブラリのリストを表します。

上記の構成により、vendor_XXXX.js という名前の DLL ファイルが生成されます。ここで、XXXX はファイルのハッシュ値を表します。このファイルには、vue、vue-router、および vuex の 3 つのライブラリのコードが含まれています。

生成された DLL ファイルを参照するには、HTML に次のコードを追加します。XXXX は、生成された DLL ファイルのハッシュに置き換える必要があります。

<script src="./dll/vendor_XXXX.js"></script>

開発に webpack-dev-server を使用する場合は、DevServer 構成に次のコンテンツを追加する必要があります。
このようにして、DevServer の起動後、autodll-webpack-plugin は生成された DLL を HTML に自動的に導入し、それによってビルド速度が向上します。 。

const AutoDllPlugin = require('autodll-webpack-plugin');

module.exports = {
    
    
  // ...
  devServer: {
    
    
    // ...
    before(app, server) {
    
    
      AutoDllPlugin({
    
    
        debug: true,
        filename: '[name]_[hash].js',
        path: './dll',
        entry: {
    
    
          vendor: [
            'vue',
            'vue-router',
            'vuex'
          ]
        }
      }).apply(new webpack.Compiler());
    }
  }
}

6. ローダーの最適化

ローダーは webpack の重要な部分であり、ローダーによるファイルの処理はコンパイル速度に影響を与える可能性があります。ローダー構成を最適化すると、コンパイル速度が大幅に向上します。

• ローダーの数を減らす: ローダーの繰り返し使用をできるだけ避けるか、必要に応じて複数のローダーをマージして、コンパイルする必要があるローダーの数を減らします。

• ローダーのコンパイル結果をキャッシュする: Webpack のキャッシュ ローダー プラグインを使用して、ローダーのコンパイル結果をハードディスクにキャッシュします。これにより、ソース ファイルを変更せずにローダーの再コンパイル時間を大幅に短縮できます。

• マルチスレッド コンパイルを有効にする: マルチスレッド コンパイル ツールを使用すると、Webpack 構築タスクを複数のサブプロセスに分解して並列実行でき、これにより CPU のマルチコア並列コンピューティングを最大限に活用し、コンパイルを高速化できます。これは、happyPack や thread-loader などのツールを使用して実現できます。

• ローダー ルールとして正規表現の使用を避ける: ローダー ルールを定義するときは、ビルド プロセスの速度が低下するため、ルールの一致方法として正規表現を使用しないようにしてください。どうしても使用しなければならない場合は、正規表現の一致範囲を制限して、一致効率を向上させることもできます。

7、除外と包含

Vue プロジェクトで exclude および include を使用すると、不必要なファイルのチェックとコンパイルが削減されるため、コンパイル速度の向上に役立ちます。

exclude と include は、webpack の module.rules 設定項目を通じて設定されます。このうち、exclude は特定のディレクトリまたはファイルをコンパイル対象から除外することを意味し、include は特定のディレクトリまたはファイルをコンパイル対象に含めることを意味します。

以下では、Vue プロジェクトの Babel コンパイルを例として、exclude と include の使用方法を紹介します。

依存関係をインストールする

npm install --save-dev babel-loader @babel/core @babel/preset-env

このうち、babel-loaderはJavaScriptコードをコンパイルするためのツール、@babel/coreはBabelコアライブラリ、@babel/preset-envはターゲット環境に応じて変換プラグインを自動選択できるプリセットパッケージです。

webpack.config.js を構成する

次の構成では、exclude: /node_modules/ は、コンパイル速度を向上させるために、node_modules ディレクトリ内の JavaScript ファイルをコンパイルから除外することを意味します。

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
    
    
          loader: 'babel-loader',
          options: {
    
    
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

プロジェクト内の特定のディレクトリにある JavaScript ファイルをコンパイルするだけでよい場合は、 include を使用して対応するディレクトリを指定できます。

たとえば、src/components ディレクトリ内の JavaScript ファイルをコンパイルするだけでよく、構成を次のように変更できます。

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.js$/,
        include: path.resolve(__dirname, 'src/components'),
        use: {
    
    
          loader: 'babel-loader',
          options: {
    
    
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

上記の構成では、 include: path.resolve(__dirname, 'src/components') は、不必要なファイルのチェックとコンパイルを減らすために、src/components ディレクトリ内の JavaScript ファイルのみがコンパイルに含まれることを意味します。

8. 差別化された環境を構築する

たとえば、開発環境では通常、ソース マップやホット アップデートなどの機能を有効にする必要がありますが、実稼働環境ではコード圧縮やツリー シェイキングなどの最適化テクノロジを有効にする必要があります。したがって、Webpack の構成ファイルで次のコードを使用して、環境に応じてさまざまなプラグインと最適化を構成できます。

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
    
    
  // ...
  plugins: [
    isProd ? new UglifyJSPlugin() : null,
    // ...
  ].filter(Boolean),
};

9. Webpackのバージョンを改善する

Webpack バージョンのアップグレードはビルド速度を向上させる重要な方法であり、新しいバージョンごとに新たな最適化とパフォーマンスの向上がもたらされます。

Webpack を最新バージョンに更新する:
まず、現在使用されている Webpack のバージョンを確認し、更新する必要があるかどうかを確認する必要があります。npm コマンドを使用して、Webpack の最新バージョンをインストールできます。

npm install webpack@latest --save-dev

予防：

• Webpack 関連のプラグインとローダーのバージョンを確認する:
  Webpack をアップグレードするときは、関連するプラグインとローダーを更新する必要があるかどうかも確認し、それらが Webpack のバージョンと互換性があることを確認する必要があります。

• 廃止されたプラグインとローダーを削除する:
  一部のプラグインとローダーはアップグレードで廃止された可能性があるため、対応するプラグインとローダーを削除する必要があります。

2. 梱包体積の最適化

分析プラグインwebpack-bundle-analyzer

まず、解析プラグインをお勧めします。このプラグインを使用すると、コンパイルおよびパッケージ化中に解析ページを開くことができ、パッケージ化後のファイル サイズとパフォーマンスの最適化に役立ちます。
各モジュールのサイズ、依存関係、構成を示す視覚的なレポートを生成できます。このレポートを通じて、各モジュールのサイズと依存関係を明確に理解することで、パッケージ化された結果のサイズにどのモジュールがより多く寄与しているかを判断し、それらを最適化できます。

webpack-bundle-analyzer プラグインの設定

webpack-bundle-analyzerプラグインのインストール

npm install --save-dev webpack-bundle-analyzer

Webpack 設定ファイルでのプラグインの使用

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    
    
  // ...
  plugins: [
      new BundleAnalyzerPlugin({
    
    
        openAnalyzer: true
      }),
  ]
}

vue cli 生成的项目下面的就不需要了，直接编译打包会打开一个分析页面

Webpack ビルドの実行
Webpack ビルド コマンドを実行します。例:

webpack --config webpack.config.js

分析レポートの表示
上記のコマンドを実行すると、レポート ページが生成され、ポート番号がコンソールに表示されます。次に例を示します。

Webpack Bundle Analyzer is started at http://127.0.0.1:8888

ブラウザで対応するアドレスを開いて分析レポートを表示します。

ビルド構成が Vue CLI や Create React App などのツールに基づいて生成されている場合、webpack-bundle-analyzer プラグインを手動で追加する必要はありません。これらのツールにはデフォルトでプラグインがすでに含まれています。 。直接コンパイルしてパッケージ化することも、対応するコマンドを使用して分析レポートを表示することもできます。例:

vue-cli-service build --mode production --report

1. オンデマンドでサードパーティのライブラリを参照する

1.1、要素 UI オンデマンド リファレンス

コンポーネントの完全なリストは、components.json (参照バージョン)に準拠しています。

• ステップ 1: babel-plugin-component プラグインをインストールします。

npm i babel-plugin-component -D

• ステップ 2:babel.config.jsまたはファイル.babelrcで構成します。

module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', {
    
     'modules': false }]
  ],
  plugins: [
    [
      'component',
      {
    
    
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

• ステップ 3: element.js を作成する

// element-ui 按需引入
// 注：完整组件列表以 components.json （引用版本的）为准
// https://github.com/ElemeFE/element/blob/master/components.json

import {
    
    
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Avatar,
  Drawer,
  Popconfirm,
  // 单独设置
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui'

const components = [
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Avatar,
  Drawer,
  Popconfirm
]

const element = {
    
    
  install: (Vue) => {
    
    
    components.forEach(component => {
    
    
      Vue.component(component.name, component)
    })

    // 单独设置
    Vue.use(Loading.directive)
    Vue.prototype.$loading = Loading.service
    Vue.prototype.$msgbox = MessageBox
    Vue.prototype.$alert = MessageBox.alert
    Vue.prototype.$confirm = MessageBox.confirm
    Vue.prototype.$prompt = MessageBox.prompt
    Vue.prototype.$notify = Notification
    Vue.prototype.$message = Message
  }
}
export default element

• ステップ4：main.jsの参照（公式コンポーネントの参照からカスタムelement.jsの参照に参照方法が変わります）

// import ElementUI from 'element-ui' // 全局引用
import ElementUI from '@/utils/element' // 按需引用
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

その後は普通に使えますよ

1.2. オンデマンドで見積もられる Echart

ここで echart.js ファイルを直接作成し、必要なときに参照することで、参照
方法が公式コンポーネントの参照からカスタム echarts.js の参照に変わります。

// import * as echarts from 'echarts' // 全量引入
import echarts from '@/utils/echarts' // 按需引入

echart.js ファイル

// echarts 按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'

// 引入图表类型，图表后缀都为 Chart
import {
    
     BarChart, LineChart, PieChart } from 'echarts/charts'
// 自定义类型的图表
import {
    
     CustomChart } from 'echarts/charts'

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    
    
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  DataZoomComponent
} from 'echarts/components'

// 标签自动布局、全局过渡动画等特性
import {
    
     LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import { CanvasRenderer } from 'echarts/renderers'
import {
    
     SVGRenderer } from 'echarts/renderers'

// 将以上引入的组件使用use()方法注册
echarts.use([
  BarChart,
  LineChart,
  PieChart,
  CustomChart,
  // 提示框，标题，直角坐标系，数据集 等组件
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  DataZoomComponent,
  // 标签自动布局、全局过渡动画等特性
  LabelLayout,
  UniversalTransition,
  // Canvas 渲染器
  // CanvasRenderer
  SVGRenderer
])

// 导出
export default echarts

1.3. Lodash はオンデマンドで引用されます

方法 1: 「lodash」の代わりに「lodash-es」を使用する

import {
    
     cloneDeep } from 'lodash-es' // 按需引入
import {
    
     throttle, debounce } from 'lodash-es' // 按需引入
// import lodash from 'lodash-es' // 全量引入

方法 2: 「lodash」を使用する場合はオンデマンド参照に注意する

// import cloneDeep from 'lodash/cloneDeep' // 按需引入
// import lodash from 'lodash' // 全量引入

2. 運用環境で console.log を削除します。

開発環境ではデバッグやコンソールログの追加が必要ですが、本番環境でも印刷するとデータ漏洩が発生しやすく、容量も占有します。

2.1、babel-plugin-transform-remove-console

これは、ビルド中にすべての console.* ステートメントを削除する Babel プラグインです。

npm install --save-dev babel-plugin-transform-remove-console

次に、次のコードをbabel.config.jsまたはファイルに追加します。.babelrc

const plugins = []
// remove console.* in production
if (process.env.NODE_ENV === 'production') {
    
    
  plugins.push('transform-remove-console')
  // plugins.push(['transform-remove-console', { 'exclude': ['error', 'warn'] }])
}

module.exports = {
    
    
  //...
  plugins: plugins
}

2.2、terser-webpack-plugin

このプラグインは、js コードを圧縮するために使用されます。console.log を削除する機能があります。プラグインを
webpack4ダウンロードしてインストールする必要があり、以下の設定が必要です。terser-webpack-plugin

npm install terser-webpack-plugin --save-dev

const TerserPlugin = require('terser-webpack-plugin')
 
module.exports = {
    
     
// ...other config
optimization: {
    
    
  minimize: !isDev,
  minimizer: [
    new TerserPlugin({
    
    
      extractComments: false, 
      terserOptions: {
    
     
        compress: {
    
     
          pure_funcs: ['console.log'] 
        }
      }
    }) ]
 }

webpack5内部に独自の js 圧縮機能があり、プラグインが組み込まれているterser-webpack-pluginため、ダウンロードしてインストールする必要はありません。また、mode="production" に設定すると、js 圧縮機能が自動的にオンになります。

開発環境で使用する場合は、次を使用します。

  // webpack.config.js中
  module.exports = {
    
    
     optimization: {
    
    
       usedExports: true, //只导出被使用的模块
       minimize : true // 启动压缩
     }
  }
 

2.3、uglifyjs-webpack-plugin

uglifyjs-webpack-plugin は、JavaScript コードを圧縮するための Webpack プラグインであり、UglifyJS に基づいており、JavaScript コードの圧縮と難読化に使用されます。

npm install --save-dev uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    
    
  // ...
  optimization: {
    
    
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
    
    
        // 开启并发
        parallel: true,
        // 多进程压缩
        uglifyOptions: {
    
    
          compress: {
    
    },
          output: {
    
    
            comments: false,
          },
        },
      }),
    ],
  }
}

注：2和3插件相关的代码没有经过实际使用测试效果！！！

3. ソースマップの適切な使用

ProductionSourceMap の役割は、問題を特定することです。パッケージ化中に .map ファイルが生成されます。実稼働環境では、出力情報の特定の行をブラウザで表示できますが、対応するパッケージのサイズも増加します。ビルド速度にも影響します。 false に設定すると、.map ファイルは生成されません。productionSourceMap を
false に設定すると、パッケージ サイズを削減できるだけでなく、ソース コードも暗号化できます。

module.exports = {
    
    
  productionSourceMap: false
}

4. コード分割

コード分​​割は、Web アプリケーションのパフォーマンスを最適化するテクノロジです。アプリケーションの JavaScript コードを複数の小さな部分に分割し、オンデマンドで読み込むことで、ホームページの読み込み時間を短縮し、応答時間を短縮します。

コードを外注する前に、プロジェクト全体のコードを 1 つの main.js にパッケージ化すると、特定のページにアクセスしたときに、必然的にリソースの無駄が発生し、ページの読み込み時間が長くなります。
コードがサブパッケージ化された後、各モジュールは個別にパッケージ化されます。main.js が分割されると、非常に小さくなります。ページが読み込まれるときに、ページもオンデマンドで読み込まれます。

効果：

• ページの読み込みを高速化する
  アプリケーションの JavaScript コードを小さな部分に分割してオンデマンドで読み込むと、ページの読み込み時間を短縮し、Web サイトの応答性を高めることができます。

• リソースの無駄を削減する
  大規模な Web アプリケーションには、すべてのページで使用されるわけではない大量の JavaScript コードが含まれることがよくあります。コード分​​割テクノロジーにより、不要なコードの読み込みを遅らせることができるため、リソースの無駄が削減されます。

• ユーザー エクスペリエンスの向上
  コード分割テクノロジを使用すると、ユーザーはアプリケーション全体のすべてのコードをロードするのではなく、実際に必要なコードのみをロードする必要があります。これにより、アプリケーションの読み込み時間とリソース使用率を削減しながら、ページの応答速度とユーザー エクスペリエンスを向上させることができます。

ここでは、プロジェクトで使用される 、 、 、およびコンポーネントを chunk-echarts.js や chunk-elementUI.js などの別のファイルに分割しますelementUI。その他は、設定されたルールに従って別のチャンク js ファイルに割り当てられますecharts。xlsx

view.config.js

module.exports = {
    
    
  // ...
  chainWebpack(config) {
    
    
  
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
    
    
          config
            .optimization.splitChunks({
    
    
              chunks: 'all',
              cacheGroups: {
    
    
                libs: {
    
    
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
    
    
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 25, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                echarts: {
    
    
                  name: 'chunk-echarts', // split echarts into a single package
                  priority: 30, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?echarts(.*)/ // in order to adapt to cnpm
                },
                xlsx: {
    
    
                  name: 'chunk-xlsx', // split xlsx into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/](xlsx|file-saver)[\\/]/ // in order to adapt to cnpm
                },
                commons: {
    
    
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
        }
      )

  }
}

5. 樹木振動技術

webpack 中国語ウェブサイト Tree Shaking

フロントエンド エクスペリエンスの最適化ツリー シェイキング
ツリー シェイキングの 1 分理解
ツリー シェイキングの簡単な分析

ツリー シェーキング テクノロジを使用して、無駄なコードを排除し、パッケージ化されたファイル サイズを削減し、ページの読み込み速度を向上させます。
Tree Shaking は、JavaScript で未使用のコード (デッドコード) をクリーンアップするために使用される手法です。ES6 モジュール構文の静的構造に依存し、プロジェクトの未使用部分を特定して削除することでバンドル サイズを削減し、それによってアプリケーションのパフォーマンスを向上させます。

Webpack でツリー シェイキングを有効にするには、次の構成が必要です。

ES6 モジュール構文を使用する:
ツリー シェイキングは ES6 モジュール構文の静的構造に依存しているため、プロジェクトでは必ず ES6 モジュール構文を使用し、CommonJS/AMD などの非静的モジュール構文の使用を避ける必要があります。

Webpack の設定ファイルでモードを設定します。

odule.exports = {
    
    
  // ...
  mode: 'production',
  optimization: {
    
    
    usedExports: true, // 开启 Tree shaking
  },
};

package.json ファイルで SideEffects プロパティを設定します。

{
    
    
  "name": "example",
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.jpg",
  ]
}

package.json ファイルにsideEffects 属性を追加して、CSS/SCSS ファイルや副作用のあるその他のファイルなど、どのモジュールをツリー シェイクしないように Webpack に指示します。

必ず UglifyJSPlugin プラグインを使用してください。UglifyJSPlugin
は Webpack に組み込まれたプラグインで、JavaScript コードの圧縮と難読化に使用され、未使用のコードの削除にも使用できます。Webpack 4 では、運用モード時に JavaScript コードの圧縮と最適化に TerserWebpackPlugin が自動的に使用されるため、UglifyJSPlugin を別途追加する必要はありません。

Tree Shaking を有効にすると、Webpack はプロジェクト コードを分析し、参照されていないすべてのモジュールとコード ブロックを削除します。これにより、パッケージ化されたサイズが削減されるだけでなく、使用されていない無効なコードを解析して実行する必要がなくなるため、アプリケーションのパフォーマンスも向上します。

上記の設定を行うと、Webapck は自動的に Tree Shaking を実行し、未使用のコードを削除します。

簡単な例を以下に示します。

// index.js
import {
    
     add } from './math.js';
console.log(add(1, 2));

// math.js
export function add(x, y) {
    
    
  return x + y;
}

export function sub(x, y) {
    
    
  return x - y;
}

上記コードではsub関数を使用していないため、シェイク後にTreeを削除します。最終的な出力コードには add 関数のコードのみが含まれており、sub 関数のコードは正常に削除されます。

一般に、アプリケーションのパフォーマンスとユーザー エクスペリエンスをさらに向上させるには、ツリー シェイキングをコード分割、遅延読み込み、プリロードなどの他の最適化テクノロジと組み合わせて使用​​する必要があります。

6. 大型モジュール cdn の導入

CDN プロバイダー
https://unpkg.com/
https://www.jsdelivr.com/
https://www.bootcdn.cn/
http://www.staticfile.org/

xlsx の検索など、unpkg を使用します。

ブラウザに入力すると、unpkg.com/xlsx最新バージョンのソースコードにジャンプします。

いくつかスペースを戻してブラウザに入力すると、unpkg.com/xlsx/dist/最新バージョンの dist リストにジャンプします。

記事

外部を正しく使用すると、Vue プロジェクトのビルド パフォーマンスが 67% 向上します。Vue
プロジェクト CDN に ElementUI が導入されました

短所: 企業が独自の CDN ライブラリを持っていない限り、オンラインで CDN を使用すると、ネットワークの問題により不安定になる可能性があります。
ただし、これは確かに最適化ソリューションであり、その効果は悪くありません。構成も非常にシンプルで、外部では次のように構成されています。

module.exports = {
    
    
    // 设置通过cdn引入的库，不打包到vendor中（需要去掉导入的相关代码）,需要在index.html中引入cdn资源
    externals: {
    
    
      vue: 'Vue', // 使用cdn引用element-ui时，必须设置vue和element-ui为外部依赖。
      'element-ui': 'ELEMENT', // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
      // 'vue-router': 'VueRouter',
      // axios: 'axios',
      echarts: 'echarts'
      // XLSX: 'XLSX'
    }
}

対応するサードパーティ パッケージが何であるかを確認するにはどうすればよいですかkey?valueそれは、パッケージにインストールされているパッケージの名前keyです。パッケージが実際に登録されるとき、またはグローバル変数の値が公開されるとき (ソース コードを開いてフォーマットするときなど) , 登録された値は次のように表示されます。はい、それに依存します。他のパッケージも同じ考えです。package.jsonvalueelement-uivalueELEMENTelememt-uiELEMENTvue

public/index.html に CDN を導入します

<!-- vue必须在element-ui前面 -->
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
<!-- unpkg element-ui 源 -->
<link href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<!-- bootcdn element-ui 源 -->
<!-- <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script> -->
    
<script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script>
<!-- <script src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script> -->

main.js で次のコードを使用している場合は、削除できます。

import ElementUI from 'element-ui'
Vue.use(ElementUI)

echart に関しては、次のコードを使用します

import * as echarts from 'echarts'

7. CSS、JS、画像リソースを圧縮し、無駄なコードを削除する

8. gzip圧縮

Gzip は、テキスト ファイルをより小さなサイズに圧縮できる一般的に使用されるファイル圧縮アルゴリズムで、Web サイトの読み込み速度とユーザー エクスペリエンスを向上させます。Web 開発で一般的に使用される圧縮ツールには、Gzip や Brotli などがあります。

Gzip 圧縮を有効にするには、webpack の組み込みcompression-webpack-pluginプラグインを使用できます。プラグインは、パッケージ化された js および css ファイルを自動的に Gzip 圧縮し、対応する .gz ファイルを生成します。

プロジェクトで Gzip 圧縮を有効にする手順は次のとおりです。

1. Compression-webpack-plugin プラグインをインストールします。

npm install compression-webpack-plugin --save-dev

vue.config.js に設定を追加して有効にしますcompression-webpack-plugin。

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
    
    
  configureWebpack: {
    
    
    plugins: [
      // 启用 Gzip 压缩
      new CompressionWebpackPlugin({
    
    
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false,
      }),
    ],
  },
}

上記の構成では、CompressionWebpackPlugin のパラメーターは次の意味を持ちます。

filename: 圧縮ファイル名、[path] はファイルパスを表し、[base] はファイル名を表します。
アルゴリズム: 圧縮アルゴリズム、ここでは Gzip が選択されます。
テスト: 圧縮する必要があるファイルの種類と一致します。
しきい値: ファイル サイズはこの値を超えた場合にのみ圧縮されます。単位はバイトです。
minRatio: 元のファイル サイズに対する圧縮ファイル サイズの比率。この値より小さい場合にのみ圧縮ファイルが生成されます。
deleteOriginalAssets: 元のファイルを削除するかどうか。true の場合、元のファイルは削除され、圧縮ファイルのみが保持されます。
npm run build を実行して本番環境のコードをビルドすると、dist ディレクトリに .gz 圧縮ファイルが生成されていることがわかります。

サーバー上で Gzip 圧縮を有効にします。Nginx を Web サーバーとして使用している場合は、nginx.conf ファイルで設定できます。

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;
gzip_proxied any;

これにより、サーバー側で Gzip 圧縮が有効になり、Web サイトの読み込み速度とユーザー エクスペリエンスが向上します。

3. パフォーマンスとユーザーエクスペリエンスの最適化

3.1. ルートの遅延読み込み

ルートの遅延読み込みとは、プロジェクトの初期化時にすべてのルーティング モジュールをロードするのではなく、必要な場合にのみ対応するルーティング モジュールをロードすることを意味します。これにより、初期読み込み時間とリソース消費が削減され、ページの読み込み速度とユーザー エクスペリエンスが向上します。Vue プロジェクトでは、動的インポートを使用してルートの遅延読み込みを実装できます。

ルートの遅延読み込みを使用する方法の手順は次のとおりです。

@babel/plugin-syntax-dynamic-import プラグインをインストールする

npm install @babel/plugin-syntax-dynamic-import --save-dev

.babelrc ファイルにプラグインを追加

{
    
    
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

ルーティング構成ファイル (router.js など) でルートを定義する場合は、インポート機能を使用してルーティング コンポーネントを遅延読み込みします。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Home = () => import('./views/Home.vue')

export default new Router({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
    
    
      path: '/',
      name: 'home',
      component: Home
    },
  ]
})

上記のコードでは、コンポーネントは import 関数を使用して動的にロードされ、コンポーネントは対応するルートにアクセスした場合にのみロードされます。これにより、ルートの遅延読み込みが実現します。

3.2. vue-lazyload プラグイン、画像の遅延読み込み

vue-lazyload画像の遅延読み込みを実装するために使用される Vue.js プラグインです。ページのスクロール イベントを自動的に監視し、ユーザーの表示領域に画像が表示されたときに画像を読み込むことができるため、ページの読み込み圧力が軽減され、ユーザー エクスペリエンスが最適化され、ページのレンダリングが高速化されます。

以下は、vue-lazyloadを使用して画像の遅延読み込みを実装する基本的な手順です。

1).vue-lazyloadプラグインをインストールする

npm install vue-lazyload --save

2). Vue コンポーネントを作成し、画像の遅延読み込みをテンプレートに導入します。

<template>
  <div class="container">
    <img v-lazy="imgSrc" alt="图片描述">
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      imgSrc: 'path/to/image.jpg'
    }
  }
}
</script>

3). Vueにvue-lazyloadプラグインを登録します

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad)

4).vue-lazyloadのグローバルパラメータを設定します。

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
    
    
  loading: 'loading.gif', // 加载中的占位图
  error: 'error.gif' // 加载失败的占位图
})

上記の手順を通じて、Vue アプリケーションに画像の単純な遅延読み込みを実装し、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。

モバイル ブラウザでは、ページのスクロールのスムーズさとユーザー エクスペリエンスを向上させるために、ページのスクロールを監視するオプションをvue-lazyload有効にし、イベントの代わりにイベントを使用することをお勧めします。同時に、ユーザーがスクロール中にインターフェイスを素早くスライドする可能性があることを考慮して、ページのスクロール時に遅延読み込みされた画像の読み込みタイミングと順序を自動的に調整するオプションをオンにすることをお勧めします。これにより、一部の画像が表示されなくなります。スクロールが速すぎるためにロードに失敗する可能性があります。listenEventsTouchscrolladapter

3.3. キャッシュの使用

キャッシュとリソースの再利用テクノロジーを使用して、キープアライブ コンポーネントを使用してコンポーネントのステータスをキャッシュするなど、不必要に繰り返されるリクエストとレンダリングを削減します。

キャッシュ テクノロジーは、Web アプリケーションのパフォーマンスとユーザー エクスペリエンスを最適化する効果的な方法です。Vue.js プロジェクトでは、キャッシュ テクノロジーを使用して、アプリケーションの応答速度をさらに向上させ、サーバーの負担を軽減し、ユーザー エクスペリエンスを向上させることもできます。キャッシュ テクノロジーを使用して Vue.js プロジェクトのユーザー エクスペリエンスを向上させる一般的な方法をいくつか紹介します。

1). ブラウザ キャッシュ
ブラウザ キャッシュは一般的で実装が簡単なキャッシュ テクノロジであり、リソース ファイル (画像、CSS、JS など) をクライアント ブラウザにキャッシュすることで、サーバー リクエストの数と速度を削減できます。ページの読み込みを高速化し、サーバーの負荷を軽減します。keep-aliveVue.js では、Vue Router が提供するコンポーネントを使用してコンポーネント キャッシュを実装できます。コンポーネントがキャッシュされると、アクセスされるたびにブラウザのキャッシュからロードされるため、サーバー リクエストの数が減り、ユーザー エクスペリエンスが向上します。. .

2). サーバー側のキャッシュ
Vue.js プロジェクトでは、通常、AJAX または Axios を使用して HTTP リクエストを送信してデータを取得しますが、リクエストごとにサーバーにデータを再リクエストする必要があると、非常に時間がかかり、帯域幅リソースとユーザーエクスペリエンスに影響を与えます。したがって、Redis を使用して一般的に使用されるデータをキャッシュしたり、CDN を使用して静的リソース ファイルを保存したりするなど、サーバー側のキャッシュ テクノロジを使用してデータをキャッシュすることができます。これにより、サーバーのリクエストの負担が軽減され、データ アクセス速度と応答時​​間が向上します。

3). 遅延読み込み
ページに大量の画像やその他のリソース ファイルが含まれている場合、ページの読み込み速度とユーザー エクスペリエンスに大きな影響を与えます。この状況を回避するには、遅延読み込みテクノロジを使用できます。つまり、ユーザーがその領域を参照する必要がある場合にのみ、特定の領域のリソース ファイルが読み込まれます。Vue.js では、vue-lazyloadプラグインを使用して画像の遅延読み込みを実装できます。

4). データ キャッシュ
Vue.js プロジェクトでは、Vuex を使用してアプリケーションのステータスを管理できますアプリケーションでは、同じデータを取得する必要があることが多いため、Vuex のキャッシュ テクノロジを使用して、要求されたデータをキャッシュし、データはキャッシュから直接取得されるため、サーバー リクエストの数が減り、ユーザー エクスペリエンスが向上します。

3.4、監視と計算

watchと は、computedVue で非常に一般的に使用される 2 つのリアクティブ データ処理メソッドであり、どちらもデータの変更を監視し、対応する操作を実行できます。Vue プロジェクトのパフォーマンスとユーザー エクスペリエンスを向上させるという点では、watchさまざまcomputedなアプリケーション シナリオと最適化方法もあります。

1). 時計のパフォーマンスを最適化する

• 非同期操作は通常、JS スレッドをブロックし、ページのパフォーマンスに影響を与えるため、watch での非同期操作は避けるようにしてください。非同期操作を実行する必要がある場合は、vm.$nextTickまたはPromise.thenメソッドを使用して、非同期操作を次の DOM 更新まで延期できます。
• 配列やオブジェクトなどの複雑なデータ型を監視する場合は、コールバック関数をすぐに実行するオプションをdeep使用するのではなく、そのサブプロパティの変更をリッスンするオプションを使用するようにしてください。immediateコールバック関数はすぐに実行されるためimmediate、監視されるデータは複数回計算およびレンダリングされ、ページのパフォーマンスに影響します。
• ウォッチ内であまりにも多くの計算およびレンダリング操作を実行することを避け、computedこれらの操作を属性で処理するようにしてください。

2. 計算パフォーマンスを最適化する

• computedで他のものを参照しないでくださいcomputed。これにより、冗長な計算とレンダリングが発生し、ページのパフォーマンスが低下します。
• 大量のデータまたは大規模な計算の場合、オプションをcomputed使用して遅延計算に設定できます。これは、計算が必要な場合にのみ再計算されます。lazy
• watch頻繁に変化する一部の応答性データの場合は、を使用して計算する代わりに、 を使用してその変更を監視することを検討できますcomputed。

3.5. 手ぶれ補正とスロットリング

関数スロットリング (スロットル) と関数デバウンス (デバウンス) は、どちらも関数の実行頻度を制限して、関数のトリガー周波数が高すぎてトリガー周波数に追いつかないこと、遅延、一時停止アニメーション、またはフリーズによって引き起こされる応答速度を最適化します
。頻繁にトリガーされるイベントの最適化ソリューション。

Vue - Lodash を使用した手ぶれ補正とスロットル

3.6. v-if および v-show の使用

v-ifと は、v-showVue で一般的に使用される 2 つの条件付きレンダリング命令です。どちらも式の値に基づいて要素の表示と非表示を制御できますが、具体的な使用法にはいくつかの違いがあります。

1). v-if
v-ifディレクティブの機能は、バインドされた式の true または false の値に基づいて DOM 要素をレンダリングするかどうかを決定することです。バインドされた式が true の場合、要素はページにレンダリングされます。バインドされた式が false の場合、要素はページにレンダリングされません。これは、DOM ツリーから要素を削除することと同じです。要素とそのサブ要素。
利点: 条件が満たされない場合、不要な DOM 要素のレンダリングと読み込みを減らすことができるため、ページの読み込み速度とパフォーマンスが向上します。
短所: 条件が切り替わるたびに、対応するコンポーネントまたは要素が再作成されて破棄されるため、プログラムの実行時よりも遅くなる可能性がありますv-show。

2). v-show ディレクティブの機能は、
v-showバインドされた式の true または false 値に基づいて要素の表示と非表示を制御することです。とは異なりv-if、v-show要素は DOM ツリーから削除されませんが、要素の表示と非表示は CSS スタイルを変更することで制御されます。
利点: 条件が満たされない場合、要素とそのサブ要素は DOM ツリーから削除されないため、条件を切り替えるときに要素の状態と属性が保持され、ページ切り替えのスムーズさとエクスペリエンスが向上します。 。
欠点: 条件が満たされない場合でも、要素はページに読み込まれるため、ページのレンダリングと読み込み時間が長くなる可能性があります。したがって、頻繁に切り替える必要がある要素やコンポーネントに使用することをお勧めしますv-show。