テキスト圧縮、コード分割、最新の画像フォーマット - パフォーマンスの最適化-jsチュートリアル-php.cn

テキスト圧縮、コード分割、最新の画像フォーマット - パフォーマンスの最適化

Patricia Arquette

リリース： 2024-12-13 00:10:15

オリジナル

347 人が閲覧しました

Text compression & Code splitting & Modern image formats - Performance optimization

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

テキスト圧縮
コード分割
最新の画像形式.

プロファイラー

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

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

FCP と LCP に影響します。

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

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

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

たとえば

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

ログイン後にコピー

ステップ 3: pnpm を実行し、ビルドを実行して

を圧縮します

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

ログ:

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

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

gzip で Vite

本番環境用の vite v5.4.10 ビルド...
✓ 654 個のモジュールが変換されました。

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 を超える未使用のバイトがあるスクリプトを確認します。

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

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

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

最新の形式で画像を提供する

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

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

WebP 画像形式のサポート情報は「使用できますか?」で確認できます。

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

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

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

簡単な .bat スクリプトを作成して、ターゲットフォルダー内のすべての .png イメージを .webp イメージに自動的に変換することもできます。

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

ログイン後にコピー

参照

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

以上がテキスト圧縮、コード分割、最新の画像フォーマット - パフォーマンスの最適化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。