本記事ではコード分割（Code-Splitting）でフロントエンド最適とのことを説明させていただきます。
結論
Single Page Application（SPA）の仕組みとは、初めてWebAppにアクセスすると、重いJSファイルを読み込んでから、ユーザブラウザ自体でHTML生成したりDOMを作成したりする処理を行います。
メリット
即時反映 （初期時点以外）
画面遷移それともUI変更され場合は、API叩いて、（HTML,CSS,JSを含まない）最新なデータをUIに入れます。
デメリット
初期時点アクセスでは所要時間がかかります
TOPページにアクセスしますが、TOP以外のものを読み込んでからTOPページ表示します。
実践でCode-Splitting応用
- Navigationケースであり、ルートコンポーネントに重い各ページを遅延読み込み
- ページの内に一部重いUIがあって、読み込でいる時に一応「読み込み中のUI」表示
Code Splitting 利用しない
課題
- 重い
Base６４で送信時間がかかる -
RenderHeavyComponentでUI生成時間がかかる
従って、お待ち時間がかかってユーザー体験が下がります
Code Splitting 利用
解決
- 軽いものを先に表示
- 重いものに対して一応「読み込み中」を表示して、段々表示
深く理解
Vue, AngluarとのフロントエンドライブラにもCode-Spilitingがありますが、本記事では下記のReactで深く説明します。
利用しない
模擬コード
import React from "react";
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
import ComponentC from "./ComponentC";
import Base64 from "./Base64";
import RenderHeavyComponent from "./RenderHeavyComponent";
function App() {
return (
<>
<ComponentA />
<ComponentB />
<ComponentC />
<Base64 />
<RenderHeavyComponent />
</>
);
}
export default App;
<Base64 />と <RenderHeavyComponent />は詳細が下の「その他」にあります。
ビルド段階
npm run build
結果
build/static/js/配下にJSファイルが１つのみ出ました。サイズは4.63MBほどです。
読み込み段階
serve -s buildを行って、サーバー立ち上げます。
ブラウザー制限
- Disable Cached
- Network速度：Fast 4G
main.bbad9597.jsが4.6MBであり、ダウンロードとUI生成の時間が5秒ほどです。
→ ユーザが5秒を待たせます。
利用する
模擬コード
解説
-
const ComponentA = React.lazy(() => import("./ComponentA"));とはReactの延長インポート -
<React.Suspense>とはHOCです。こちらは重いコンポーネントを包み-
fallbackとは、読み込み中の時に指摘されるコンポーネントを表示
-
コード
import React from "react";
const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));
const ComponentC = React.lazy(() => import("./ComponentC"));
const RenderHeavyComponent = React.lazy(() => import("./RenderHeavyComponent"));
const Base64 = React.lazy(() => import("./Base64"));
function App() {
return (
<>
<ComponentA />
<ComponentB />
<ComponentC />
<React.Suspense
fallback={
<div>
<h1> LOADING Base64............</h1>
</div>
}
>
<Base64 />
</React.Suspense>
<React.Suspense
fallback={
<div>
<h1> LOADING.........</h1>
</div>
}
>
<RenderHeavyComponent />
</React.Suspense>
</>
);
}
export default App;
ビルド段階
npm run build
結果
６ファイルに分けています
読み込み段階
serve -s buildを行って、サーバー立ち上げます。
ブラウザー制限
- Disable Cached
- Network速度：Fast 4G
- 200msほぼ軽いUIを表示
-
RenderHeavyComponentがUI生成中の時に、一応「 LOADING.........」を表示 - 重い
Base64Componentが5秒ほどダウンロードとUI生成を完了して表示。そして、処理中の時に、「LOADING Base64............」を一旦表示します。
実践でCode-Splitingを利用
おもいコンテンツを表示
ヘッダーとメニューとフーターが軽いコンポーネントで表示します。重いコンテンツに読み込みの時に、スプリンターとか一旦表示して、処理が完了してからコンテンツを表示します。そのためUIUXが改善
Navigation
Root.jsで以下のようにRouting設定します。
問題としては、/homeに入る時には、/usersそてとも/about ページを表示しませんが、結構重くて、取得されます。したらがって、homeページ表示速度に悪い影響を与えます。Code Splitting でこちら問題を解決できます。
その他、最新なNavigating LibraryにもCode Splittingが既に対応しています。
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
その他
上記のコンポーネントがこちら
//Divを10000個表示
function RenderHeavyComponent() {
const [data] = useState(() => {
const arrays = [];
for (let index = 0; index < 10000; index++) {
arrays.push(index);
}
return arrays;
});
return (
<div styles={"background-color: green;"}>
Render Heavy Component
{data.map((dt, idx) => (
<div key={idx}>{dt}</div>
))}
</div>
);
}
//４MBほどの重いコンポネート作成するため、Base64 source ImgにRawエンコードを入れる
function Base64() {
return (
<div>
<h4>Base64</h4>
<img height={500} width={500} src={`
base 64 endcode here.. ~4MB
`}/>
</div>
)
}
参考
https://legacy.reactjs.org/docs/code-splitting.html
https://developer.mozilla.org/ja/docs/Glossary/Code_splitting
https://react.dev/reference/react/Suspense