Code Sprittingで初期表示の最適化

Code Sprittingとは

SPA(シングルページアプリケーション)においては、JSがHTMLを生成することで描画を行います。基本的には複数のJSファイルをバンドルしたもの生成して行うため、ファイルサイズが大きくなりがちです。

そのような大きなファイルを1度に読み込んで処理しようとすると時間がかかってしまうため、必要なタイミングで必要なJSを取り出して処理することで初期表示を早くしようという考え方がCode Sprittingとなります。

例えば、routeごとにCode Sprittingしていくとか。

Code Sprittingの注意点

分割しすぎない

”分割する＝読み込むべきファイル数が増える”となり、あまりに分割しすぎると今度はネットワークがボトルネックになる可能性があります。

どこで、どの程度分割するのか等の方針を実装の前段階で決めておくことが大切です。バランスよくやっていきましょう。

VueにおけるCode Sprittingのやり方

通常、コンポーネントを記載する際は以下のようにscriptsの上部でimportします。

import Sample from '@/components/Sample';
export default {
    components: {
        Sample
    }
}

それを、以下のようにすることでCode Sprittingに対応させます。

const Sample = () => import('@/components/Sample');
export default {
    components: {
        Sample
    }
}

ReactにおけるCode Sprittingのやり方

通常は、Vue同様に上部でimportと書いています。

import Sample from '@/components/Sample';
const MyComponent = () => {
  return (
      <div>
        <Sample />
      </div>
  );
}

それを、React.lazyを使って実現します。

const Sample = React.lazy(() => import('@/components/Sample'));
const MyComponent = () => {
  return (
    <div>
    <Sample />
    </div>
  );
}

まー、メモ的な記事ということで、ここまで。