Reactでのコード分割

コード分割とは何ですか?Reactアプリでそれを導入する方法

最新のJavaScriptアプリケーションは、バンドルサイズの点で非常に巨大になる可能性があります。最初のページをロードするためだけに、ユーザーが1MBのJavaScriptパッケージ(コードと使用するライブラリ)をダウンロードする必要はありませんか?しかし、これは、Webpackバンドルで構築された最新のWebアプリを出荷するときにデフォルトで発生することです。

そのバンドルには、ユーザーがログインページで停止するだけで、アプリの残りの部分が表示されないため、実行されない可能性のあるコードが含まれます。

コード分割は、必要なときに必要なJavaScriptのみをロードする方法です。

これにより、次のことが改善されます。

  • アプリのパフォーマンス
  • メモリへの影響、したがってモバイルデバイスのバッテリー使用量
  • ダウンロードされたキロバイト(またはメガバイト)サイズ

2018年10月にリリースされたReact16.6.0は、以前に使用されたすべてのツールまたはライブラリの代わりとなるコード分割を実行する方法を導入しました。React.lazyそしてサスペンス

React.lazyそしてSuspense依存関係を遅延ロードし、必要な場合にのみロードするための完璧な方法を形成します。

から始めましょうReact.lazy。これを使用して、任意のコンポーネントをインポートします。

import React from 'react'

const TodoList = React.lazy(() => import(’./TodoList’))

export default () => { return ( <div> <TodoList /> </div> ) }

TodoListコンポーネントは、利用可能になるとすぐに動的に出力に追加されます。 Webpackはそれ用に別のバンドルを作成し、必要に応じてロードを処理します。

Suspense遅延ロードされたコンポーネントをラップするために使用できるコンポーネントです。

import React from 'react'

const TodoList = React.lazy(() => import(’./TodoList’))

export default () => { return ( <div> <React.Suspense> <TodoList /> </React.Suspense> </div> ) }

遅延ロードされたコンポーネントがフェッチおよびレンダリングされる間、出力の処理を処理します。

その使用fallback一部のJSXまたはコンポーネント出力を出力するprop:

...
      <React.Suspense fallback={<p>Please wait</p>}>
        <TodoList />
      </React.Suspense>
...

これはすべてReactRouterでうまく機能します:

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

const TodoList = React.lazy(() => import(’./routes/TodoList’)) const NewTodo = React.lazy(() => import(’./routes/NewTodo’))

const App = () => ( <Router> <React.Suspense fallback={<p>Please wait</p>}> <Switch> <Route exact path="/" component={TodoList} /> <Route path="/new" component={NewTodo} /> </Switch> </React.Suspense> </Router> )

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: