Dynamic importとは？

必要な箇所で必要最低限のモジュールを利用できるimport方法

Dynamic importの何が嬉しいか？

• 先頭に記載するimportと比較して不要なモジュールを読み込んだりする必要がない分、不要な通信コストを抑えることができる
• import対象のパスをハンドリングすることで欲しいモジュールを柔軟にコントロールできる

使い方

• 通常のimport

先頭に指定してimport

import { add } from "./add";

const Component = () => {
  console.log(add(1,2));
};

export default Component;

• dynamic import

関数コンポーネント内で直接import

const Component = () => {
  import("./add").then((module) => {
    console.log(module.add(1, 2));
  });
};

export default Component;

非同期関数としてdynamicImport変数を宣言した上で関数を実行

const Component = () => {
    const dynamicImport = async () => {
        const module = await import("./add");
        console.log(module.add(1, 2));
    }
    dynamicImport();
};

export default Component;