📚

分かった気になるコード分割でパフォーマンス改善

2022/02/13に公開約2,100字

はじめに

最近のフロントエンド開発では、Webpack, Rollup などのバンドラーを使用して、アプリ全体を一度に読み込みできるようになります。

バンドルはとても素晴らしいのですが、アプリの規模が大きくなるに連れ、バンドルサイズも大きくなり、読み込み時間が長くなります。
読み込み時間が長すぎてしまい、ユーザーの使い心地を損ねるのは極力避けたいですね。

そこで、意識したいのがコード分割になっていきます。

コード分割をすることのメリット

コード分割すると、ユーザーが必要としているものだけをロードして、パフォーマンスの向上してくれます。
コード分割は、JavaScript実行時に動的に読み込んで複数のバンドルを生成し、factor-bundleを介して、サポートしてくれる機能でもありますね。

注意点として、アプリの全体的なバンドルサイズを削減してくれませんが、不要なコードの読み込みを避け、初期読み込みのファイルサイズを最小にしてくれます。


補足事項
Webpackを使用する場合はこちらの公式ドキュメントに目を通すのが良いと思います。
Babelを使用している場合はこちらのプラグインが必要になるかもしれませんね。

Reactを使用したコード分割

React Suspenseloadable-componentsreact-routerなどのライブラリを組み合わせることで、動的にコンポーネントを読み込みます。(サーバーサイドレンダリングでのコード分割の場合は、Loadable Componentsを推奨)

index.js
import React, { lazy, Suspense } from "react";
import { render } from "react-dom";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";

const App = lazy(() => 
    import(/* webpackChunkName: "home" */ "./App")
);
const Overview = lazy(() =>
    import(/* webpackChunkName: "overview" */ "./Overview")
);
const Settings = lazy(() =>
    import(/* webpackChunkName: "settings" */ "./Settings")
);

render(
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
            <Switch>
                <Route exact path="/">
                    <App />
                </Route>
                <Route path="/overview">
                    <Overview />
                </Route>
                <Route path="/settings">
                    <Settings />
                </Route>
            </Switch>
        </Suspense>
    </Router>,
    document.getElementById("root")
);

module.hot.accept();

各RouteにコンポーネントをReact.lazy()することで今いるRouteに必要なコードを含むバンドルだけを要求することができます。
ユーザーはリダイレクト中に読み込み時間が発生することには問題を感じなかったりするので、コンポーネントを読み込むタイミングとして最適ではないでしょうか

参考文献

GitHubで編集を提案

Discussion

ログインするとコメントできます