[react]反応コード剥離(コード分割)

最初のコメントを書くことを考えているうちに最近たくさんのコメントを使っているので、コメントに役立つコメントを書きたいですコード剥離です.
プロジェクトは最初は小さかったが、要求が高くなり、機能が多くなり、ページが多くなり、プロジェクトが膨大になったという経験があると思います.
その際に必要な部分がコード分割(コード分割)です.
原理は,ブロック単位でコードを分割し,コンポーネントを動的にロードする際に使用するjsファイルである.
実際には、ページ上でルーティングを行った場合、応答でコード分割を簡単に実現できます.
では、どうやって行ったのか見てみましょう.
これは、パフォーマンスの最適化を考慮している場合は、プロジェクト構成が完了していると仮定した例です.場合によっては適用すればよい

router/index.js

import { lazy } from 'react'

const HomeComponent = lazy(() => import('page/HomeComponent'))
const AboutComponent = lazy(() => import('page/AboutComponent'))
const OtherComponent = lazy(() => import('page/OtherComponent'))

let routes = [
  { redirect: true, path: "/", to: "/home" },
  { redirect: false, path: "/home", component: HomeComponent },
  { redirect: false, path: "/about", component: AboutComponent },
  { redirect: false, path: "/other", component: OtherComponent }
]

ルータの構成は次のとおりです.

App.js

import React, { Component, Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'

import routes from 'router'

class App extends Component {
  render() {
    return (
      <Suspense fallback={<div>...Loading</div>}>
      	<Switch>
          {routes.map((prop, index) => {
              if (prop.redirect) {
                return (
                  <Redirect 
                    exact 
                    from={prop.path} 
                    to={prop.to} 
                    key={index} 
                   />
                )
              } else {
                return (
                  <Route
                    key={index}
                    path={prop.path}
                    component={prop.component}
                  />
                )
              }
          })}
        </Switch>
      </Suspense>
    )
  }
}

export default App;

App.jsの構成は以下の通りです.
よし終わりだ!
次のように構築してテストします.

コード分割前のbulidを適用する場合

コード分割を適用してbulid時

ファイルはブロック単位で構築されます.
jsファイルを動的にロードするかどうかも確認します.以下に示します.

1ページ目に入ると

モバイルルータによる動的ロード

コード分割が適用されると、必要に応じてjsファイルを動的にロードでき、パフォーマンスが大幅に向上します.
ただし、これらの機能を無条件に適切な方法で適用すると、問題が発生する可能性があります.(重要!)
次の文章では、発生する可能性のある問題と、これらの問題をどのように解決するかについて議論します.
最後に、最近暑くなりましたので、熱中症に気をつけてください:)
次の記事を見る