😶‍🌫️
ダイナミックインポートってなんやねん(ちょっと色々迷走しつつ)

2025/07/01に公開
 🔰はじめにコードリーディングしている時にダイナミックインポートという言葉が出てきたので自分なりに整理

調べれば調べるほど分からなくなる状態だったのでその他の文言解説も含んでます

 💨一言で初めからコンポーネントを用意しておくのではなく、ここぞという時にコンポーネントを用意するための機能

 🥼ChatGPTくんの回答ダイナミックインポート（Dynamic Import）は、JavaScriptにおいて、モジュールを必要な時に動的に読み込むための機能です。通常のimport文では、ファイルの先頭で全ての依存関係を宣言する必要がありますが、ダイナミックインポートでは、必要なモジュールをコードの任意の箇所で非同期に読み込むことができます。
ダイナミックインポートは、import()関数を使用して行われます。この関数はPromiseを返し、指定されたモジュールを非同期にロードします。次のように使用します：
import('./module.js')
  .then(module => {
    // モジュールが読み込まれた後に実行したい処理を記述します
  })
  .catch(error => {
    // エラーハンドリング
  });
このようにすることで、実行中に必要なモジュールを動的に読み込むことができます。例えば、特定の条件が満たされた場合にモジュールを読み込んで処理を実行するなど、動的なモジュールの利用に役立ちます。また、ビルド時ではなく実行時にモジュールを選択的に読み込むことが可能になり、アプリケーションのパフォーマンスを向上させることができます。

 🕵🏻‍♂️ChatGPTくんの回答を見て追記通常の import 文
での書き方をするとこんな感じ
import module from './module.js'; // モジュールを同期的に読み込む

// モジュールが読み込まれた後に実行したい処理を記述します
// ...

// ただし、通常のimport文では条件による動的なモジュール読み込みはできません
この書き方だと否が応でもimportする必要があるが、ダイナミックインポートにしたら

「この条件に当てはまったらimportしてね」とか

「この処理が終わったらimportしてね」とか

ができるようになるので便利

 🖥️実際の書き方携わっていたプロジェクト(Vue.jsとLaravelを使用)では、トップでリスト系のコンポーネントを読むときに以下のように呼んでいる
page('/', () => {
  import(/* webpackChunkName: "list-component */ './List').then(
    ({ List }) => {
      return new List();
    },
  );
});
この /* webpackChunkName: "list-component */  にも初めて触れるので記載

 🍫webpackChunkNameWebpackの設定で 'list-component' という名前のチャンク（ファイル）にグループ化されるように指定しています。
とのこと
？？
Webpackとは
チャンクとは
要はなんなの??
という感じで見ていきます

 📦WebpackとはWebpackは、JavaScriptのモジュールバンドラー（module bundler）です。
JavaScriptの開発において、複数のファイルに分かれたコードを1つのファイルにまとめる必要があります。このような作業は手動で行うこともできますが、プロジェクトの規模が大きくなるにつれて管理が困難になります。
Webpackは、このような問題を解決するために開発されました。Webpackは、アプリケーションの依存関係を解析し、それぞれのモジュールを適切な順序で組み合わせて1つのバンドルファイルにまとめます。これにより、複数のファイルを読み込む必要がある場合でも、1つのスクリプトタグだけでアプリケーションを実行することができます。
Webpackは、JavaScriptだけでなく、CSS、画像、フォントなどのリソースも管理することができます。さらに、機能拡張やプラグインシステムによって、さまざまなカスタマイズや最適化が可能です。
Webpackの主な特徴は次のとおりです:
モジュールバンドリング: 依存関係を解析し、モジュールを1つのバンドルファイルにまとめます。
ローダー: JavaScript以外のリソース（CSS、画像、フォントなど）を取り扱うためのローダーをサポートしています。
プラグインシステム: 機能拡張や最適化のためにプラグインを使用することができます。
高速な開発ビルド: キャッシュや並列処理などの仕組みにより、高速な開発ビルドが可能です。
Webpackは、モダンで複雑なJavaScriptの開発において、効率的で柔軟なモジュール管理を提供するツールとして広く使われています。
ということでさらに聞いてみる
Webpackは、JavaScriptのモジュールバンドラー（module bundler）です。
モジュールバンドラーとはモジュール（コードの独立した部分）を1つにまとめるための仕組みらしい。

なのでWebpackはコードを1つにまとめるための仕組みの一種だということが分かった。
複数ファイルにまたがるJSファイルを関数などの単位でモジュールとして分割する

↓

さらにそれをまとめ直す
みたいなイメージかなあ...

 🔨チャンクとはWebpackにおける「チャンク」とは、アプリケーションのソースコードを分割してバンドルする際の単位です。一般的に、複数のモジュールが1つのチャンクにまとめられます。
Webpackでは、エントリーポイントから始まり、依存関係のグラフが構築されます。このグラフを解析し、モジュール間の依存関係を把握した後、それらのモジュールを適切にグループ化し、チャンク（バンドル）を生成します。各チャンクは、バンドルされたJavaScriptコードとその依存関係を含んでいます。
チャンクは通常、なるべく小さくすることが望まれます。これにより、ユーザーが必要な部分のみをダウンロードして読み込むことができ、初期ロード時間を最適化することができます。また、チャンクはキャッシュの単位でもあり、変更されたモジュールのみ再ビルドするという利点もあります。
例えば、アプリケーションにはヘッダーとフッターの2つのコンポーネントがあり、それぞれが個別のモジュールとして実装されている場合、Webpackはこれらのモジュールを個別のチャンクにまとめることができます。このようにすることで、ヘッダーまたはフッターが変更された場合でも、他のチャンクの再ビルドは不要となり、パフォーマンスが向上します。
とは答えてくれたけど諸々分からない単語があるが、一旦はじめの一文だけ見てみる。
Webpackにおける「チャンク」とは、アプリケーションのソースコードを分割してバンドルする際の単位です。一般的に、複数のモジュールが1つのチャンクにまとめられます。
バンドルという言葉が不明だったので追加で聞いてみると
「バンドル」とは、複数のファイルやモジュールを1つの単位にまとめたものです。
とのことだったのでざっくりした言葉に直すと「アプリケーションのソースを分割してまとめ直す」みたいな感じっぽい

 🔦要はなんなの??Webpackの設定で 'list-component' という名前のチャンク（ファイル）にグループ化されるように指定しています。
コードを1つにまとめるための仕組みの一種であるWebpackというものを使用し、

アプリケーションのソースを分割してまとめ直す時に 'list-component' という名前がついたグループに入るよ！
という意味で理解しました。

 補足実際は https://zenn.dev/link/comments/0a05edda425f7f の書き方をしているのでそのパスに遷移した際にグループ化がはたらく。

別の場所に遷移してもグループ化されたものは破棄されない。
🔰はじめに

💨一言で

🥼ChatGPTくんの回答

🕵🏻‍♂️ChatGPTくんの回答を見て追記

🖥️実際の書き方

🍫webpackChunkName

📦Webpackとは

🔨チャンクとは

🔦要はなんなの??

補足

Discussion
