サイド プロジェクトのパフォーマンスを最適化するために次のことを試しました:

1. テキスト圧縮
2. コード分割
3. 最新の畫(huà)像形式.

プロファイラー

私が構(gòu)築したアプリは、pnpm で Vite を使用しました。最新の Web ビルド ツールは、デフォルトでビルド プロセスで Web パフォーマンスを自動(dòng)的に最適化します。したがって、pnpm run build、次に pnpm dlxserve dist を?qū)g行できます。次に、Chrome DevTools の Lighthouse をガイドとして使用し、そこにリストされている各ボトルネックに対処します。

テキスト圧縮を有効にする

FCP と LCP に影響します。

Lighthouse が最初に提案するのは、br や gzip などのアルゴリズムを使用してテキストを圧縮することです。

一般的な方法は、Web リクエストを行うたびに Accept-Encoding: gzip を追加するです。私が構(gòu)築しているアプリはリソースをローカルで提供するため、ファイルを圧縮するために vite-plugin-compress をインストールしました。

ステップ 1: vite-plugin-compress をインストールします
ステップ 2: vite.config.js ファイルを構(gòu)成し、プラグインといくつかのパラメーターを追加します。 Google Developers が示唆しているように、できる限り gzip ではなく br(brotliCompress) を使用する必要があります。

たとえば

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

ステップ 3: pnpm を?qū)g行し、ビルドを?qū)g行して

.js および .css ファイルが正常に圧縮されました。

ログ:

? [vite-plugin-compression]:algorithm=brotliCompress - ファイルが正常に圧縮されました。

Vite はデフォルトで .gzip を使用してファイルを圧縮しますが、brotliCompress を使用すると、ビルド プロセス中に圧縮することができます。

gzip で Vite

本番環(huán)境用の vite v5.4.10 ビルド...
? 654 個(gè)のモジュールが変換されました。

index-B9QUW17e.css 8.60 kB │ gzip: 2.33 kB
PauseMenu-DjZ95K-6.js 1.77 kB │ gzip: 0.62 kB
Index-ohAKp9W9.js 1,688.05 kB │ gzip: 454.20 kB

br による Vite プラグイン圧縮

? [vite-plugin-compression]:algorithm=brotliCompress - ファイルが正常に圧縮されました:
PauseMenu-DjZ95K-6.js.br 1.73kb / brotliCompress: 0.51kb
Index-B9QUW17e.css.br 8.40kb / brotliCompress: 1.97kb
Index-ohAKp9W9.js.br 1648.49kb / brotliCompress: 345.30kb

使われないJavaScriptを減らす

FCP と LCP に影響します。

Google DevTools の [カバレッジ] タブを使用して、20kbs を超える未使用のバイトがあるスクリプトを確認(rèn)します。

私は React で Vite を使用しているため、コード分割は未使用の JavaScript を減らすための最初のことです。

React では、 と lazy() がこれに役立ちます。

1. を使用してアプリ全體をラップし、
   Loading
   などのフォールバック UI を提供します。これにより、アプリの読み込み時(shí)にフォールバック UI が提供されます。
2. lazy() を使用して、最初のページで使用されていないコンポーネントをラップします。たとえば、ゲームの場(chǎng)合、ユーザーが Esc キーを押すと、終了できるメニューが表示されます。

最新の形式で畫(huà)像を提供する

Chrome デベロッパーは、AVIF または WebP 形式で畫(huà)像を提供することを推奨しています。 WebP を選択したのは、ブラウザ間でのサポートが充実しているためです。

Chrome、Firefox、Safari、Edge、Opera の最新バージョンは WebP をサポートしていますが、AVIF のサポートはさらに制限されています。

WebP 畫(huà)像形式のサポート情報(bào)は「使用できますか?」で確認(rèn)できます。

WebP で cwebp ライブラリをインストールし、コマンド cwebp -q 50 image/flower1.jpg -o Images/flower1.webp を使用して .png を .webp に変換できます。 。

このコマンドは、images/flower1.jpg ファイルを品質(zhì) 50 (0 が最低、100 が最高) で変換し、images/flower1.webp として保存します。

圧縮結(jié)果は非常に印象的です。ファイルの 1 つは、サイズが 3.5 MB から 178 kb に縮小されました。情報(bào)強(qiáng)度が低いものでも 4 倍の圧縮が可能です。

簡(jiǎn)単な .bat スクリプトを作成して、ターゲット フォルダー內(nèi)のすべての .png イメージを .webp イメージに自動(dòng)的に変換することもできます。

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

參照

• 未使用の JavaScript を削除します
• 「カバレッジ」タブで使用済みおよび未使用の CSS を表示します。
• 最新の形式で畫(huà)像を提供します。
• コマンドラインを使用した WebP イメージの作成
• プリコンパイルされたユーティリティ
• WebP 畫(huà)像形式 - 使用できますか
• 最大のコンテンツフル ペイント (LCP)
• 最初のコンテンツフル ペイント (FCP)

以上がテキスト圧縮、コード分割、最新の畫(huà)像フォーマット - パフォーマンスの最適化の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。