React は、フロントエンド集中型のアプリケーションに広く使用されており、パフォーマンスとサイズを最適化する獨(dú)自の方法を備えています。両方を改善すると、React パッケージのバンドル サイズにかなりの測(cè)定可能な影響が生じます。クライアントがレンダリングするアプリケーションに焦點(diǎn)を當(dāng)てていることを考慮すると、バンドル サイズが小さいほど読み込み時(shí)間は速くなります。

サーバー側(cè)のレンダリングにより、読み込み時(shí)間がさらに短縮されます。サーバー側(cè)レンダリングでは、ユーザーが Web ページをリクエストすると、React コンポーネントがサーバー自體で HTML コードとしてレンダリングされます。次に、この事前レンダリングされたページがブラウザーに送信されるため、ユーザーは JS 読み込み時(shí)間のオーバーヘッドなしですぐにページを表示できるようになります。

しかし、それは全く別の話です。コードに微調(diào)整を加えてパッケージ バンドルのサイズを改善することに取り組み、クライアント側(cè)でレンダリングされるサイトを改善することに主に焦點(diǎn)を當(dāng)てましょう。深く掘り下げてみましょう。

1. コード分割と動(dòng)的インポート

React コードの「バンドル」とは、すべてのインポートとコードをたどって、それを「バンドル」と呼ばれる 1 つのファイルに結(jié)合するプロセスです。 Webpack、Browserify などはすでにこれを行っています。

Webpack には「コード分割」と呼ばれる機(jī)能があり、単一のバンドルを小さなチャンクに分割し、チャンクの重複を排除し、それらを「オンデマンド」でインポートします。これは、アプリケーションのロード時(shí)間に大きな影響を與えます。

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

React Suspense によるコンポーネントの遅延読み込み (React 18): これを動(dòng)的インポートと組み合わせると、コンポーネントの読み込み時(shí)間に目に見える改善が見られます。

通常、親コンポーネント內(nèi)に子コンポーネントをインポートするときは、靜的にインポートします。実際にレンダリングする必要があるまでこのコンポーネントがインポートされないようにするには、動(dòng)的インポートと React Suspense を組み合わせて使用??します。 React Suspense を使用すると、オンデマンドでコンポーネントをロードできます。対応するコンポーネントが動(dòng)的にインポートされてレンダリングされる間、フォールバック UI が表示されます。

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

2. 木の揺れ

これは、バンドルを作成する前に未使用のコードをすべて削除するために JavaScript バンドラーによって使用される手法です。 ES6 コードはツリーシェイク可能です。ただし、CommonJS に基づくコード (つまり、「require」を使用するコード) はツリーシェイクできません。

Webpack Bundle Analyzer は、インタラクティブなマップを使用して Webpack のサイズを視覚化するのに役立つプラグインです。

npm install --save-dev webpack-bundle-analyzer
npm install -g source-map-explorer

次に、上記をプラグインとして追加するように Webpack を設(shè)定します。

plugins: [
  new BundleAnalyzerPlugin(),
  new HtmlWebpackPlugin({
    template: './public/index.html', // Path to your HTML template
    filename: 'index.html', // Output HTML file name
    inject: true, // Inject all assets into the body
  }),
];

スクリプトが Webpack を?qū)g行するように設(shè)定されていることを確認(rèn)してください:

"build": "webpack --config webpack.config.js --mode production"

yarn build を?qū)g行して、バンドル サイズを効果的に視覚化するのに役立つ report.html を生成します。

次のようになります:

3. 同時(shí)レンダリング

ブロッキング レンダリングとは何かを理解することから始めましょう。レンダリングのブロックとは、React がバックグラウンドでそれほど重要ではないタスクを?qū)g行していたために、メイン スレッド (UX 更新) がブロックされた場(chǎng)合です。これは React 16 まではそうでした。

React 18 には同時(shí)機(jī)能が導(dǎo)入されており、次のことが可能になります。

• バックグラウンド更新のスケジュール設(shè)定をより詳細(xì)に制御できるようになり、メインスレッドをブロックしないことでスムーズなエンドユーザー エクスペリエンスが実現(xiàn)されます。
• 狀態(tài)更新の自動(dòng)バッチ処理を開始する: バッチ処理とは、狀態(tài)が 1 回だけ更新されるように、複數(shù)の狀態(tài)更新による複數(shù)の再レンダリングをグループ化することを指します。

startTransition() フックを使用して React の更新を非緊急として管理し、React がユーザー入力やユーザーによるコンポーネントとの対話などの緊急の更新を以前の更新よりも優(yōu)先できるようにします。

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

この例では、入力値が変化すると、handleChange 関數(shù)が呼び出されます。 startTransition 関數(shù)は、リスト狀態(tài)の更新を非緊急としてマークするために使用されます。これにより、React は値の狀態(tài)への更新を優(yōu)先し、リストが大きい場(chǎng)合でも入力の応答性を維持できるようになります。

useDeferredValue フックを使用して、UI のビジー狀態(tài)がなくなるまで値 (通常は高価な計(jì)算) を延期します。

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

この例では、useDeferredValue フックを使用して、UI のビジー狀態(tài)が少なくなるまで値の狀態(tài)を延期します。これにより、入力の更新が処理されるまで大きなリストのレンダリングを延期することで、入力の応答性を維持することができます。

同時(shí)レンダリングの主な利點(diǎn):

• 応答性の向上: React がレンダリング作業(yè)を中斷できるようにすることで、UI はユーザーの操作に対する応答性を維持します。
• 優(yōu)先順位付け: React は、緊急でない更新よりも緊急の更新を優(yōu)先して、よりスムーズなユーザー エクスペリエンスを保証できます。
• パフォーマンスの向上: 高価なアップデートを延期できるため、メインスレッドへの影響が軽減され、アプリの全體的なパフォーマンスが向上します。

4. リソースの事前ロードをサポート (React 19)

ロード中にアプリケーションが大量のリソースを取得することがわかっている場(chǎng)合は、そのリソースをプリロードすることをお?jiǎng)幛幛筏蓼?。これらのリソースには、フォント、畫像、スタイルシートなどがあります。

プリロードが有益なシナリオ:

• 子コンポーネントはリソースを使用します。その場(chǎng)合、親コンポーネントのレンダリング段階でプリロードできます。
• イベント ハンドラー內(nèi)でプリロードすると、このリソースを使用するページ/コンポーネントにリダイレクトされます。実際、これはレンダリング中にプリロードするよりも優(yōu)れたオプションです。

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

興味深い事実: プリロードを?qū)g裝した後、Shopify、Financial Times、Treebo を含む多くのサイトで、インタラクティブまでの時(shí)間やユーザーが認(rèn)識(shí)する遅延などのユーザー中心の指標(biāo)が 1 秒改善されました。

---

フィードバックを殘してください

このブログがお役に立てば幸いです!あなたのフィードバックは私にとって非常に貴重です ご意見やご提案を下のコメント欄に殘してください。

さらに詳しい情報(bào)や最新情報(bào)が必要な場(chǎng)合は、LinkedIn でお?dú)葺Xにご連絡(luò)ください。つながりを保ち、一緒に學(xué)び、成長(zhǎng)し続けましょう!

以上がReactJS アプリケーションのパフォーマンスとサイズの迅速な最適化の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。