React Lazy Importsは間違った方法で使用しています。

この記事では、React Lazy Loadingの最適化戦略について説明します。プロジェクトでは、開発者は最初に次の方法を使用して怠zyなロードを使用しました。

NPM Run Buildを使用してプロジェクトを構築する場合、3.64秒かかりました。

<code class="language-javascript">const AnimatedScore = React.lazy(() => import('../components/AnimatedScore'))
const FireworksCanvas = React.lazy(() => import('../components/FireworksCanvas'))
// ... 其他组件</code>

建設速度を最適化するために、開発者は

メソッドを使用します：

map

変更後、建設時間は926ミリ秒に短縮され、大幅に改善されました。

<code class="language-javascript">const [
  AnimatedScore,
  FireworksCanvas,
  // ... 其他组件
] = [
  'AnimatedScore',
  'FireworksCanvas',
  // ... 其他组件名
].map((component) => React.lazy(() => import(`../components/${component}`)))</code>

背後にある理由：

メソッド（または

にゆっくりとロードを生成するために使用する）を使用すると、パッケージツール（Viteなど）が一度にすべての依存関係を処理できるようになります。 各コンポーネントの

ステートメントと個別に、mapメソッドはすべてのコンポーネントを集中させます。これにより、パッケージツールがこれらのコンポーネントをより効果的に処理し、必要なコードブロックを作成できます。 reduce import()概要：map

一つの怠lazさは、動的導入にメソッドを使用するようにロードされており、建設プロセスを最適化する主な方法は次のとおりです。

パッケージ中の冗長操作を減らします

mapより良い作成とグループコードブロック

コードブロックの作成プロセスの並列化効率を改善
コードブロックの再利用
• を最適化します
• この反応の怠zyな負荷の最適化方法を知っていますか？コメントエリアであなたの考えを共有することを歓迎します！ ？

以上がReact Lazy Importsは間違った方法で使用しています。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。