static-import

静的インポート

import キーワードを使うと、別のモジュールによってエクスポートされたコードをインポートできます。デフォルトでは、静的にインポート するすべてのモジュールが初期バンドルに追加されます。デフォルトの ES2015 インポート構文 import module from 'module' を使ってインポートされるモジュールは、静的にインポートされています。

例を見てみましょう！シンプルなチャットアプリには Chat コンポーネントがあり、その中で UserProfile、ChatList、メッセージを入力して送信するための ChatInput という3つのコンポーネントを静的にインポートしてレンダリングしています！ChatInput モジュール内では、ユーザーが絵文字を切り替えたときに絵文字ピッカーを表示できるよう、EmojiPicker コンポーネントを静的にインポートしています。

使用するタイミング

• ページの読み込み時にすぐ必要となるモジュールのインポートに使用します
• これはデフォルトのインポート方法です。動的インポートに切り替えるタイミングを把握するためにも、仕組みを理解しておきましょう

手順

• 初期レンダリングに不可欠なモジュールには静的インポートを使用します
• 静的にインポートしたすべてのモジュールは初期バンドルにまとめられることに注意してください
• 初期レンダリング時に必要ないモジュールは、動的インポートへの切り替えを検討してください

詳細

エンジンがインポート文の行に到達すると、モジュールが実行されます。

コンポーネントが静的にインポートされているため、Webpack はモジュールを初期バンドルにまとめました。

Asset           Size      Chunks            Chunk Names
main.bundle.js  1.5 MiB    main  [emitted]  main

チャットアプリケーションのソースコードは、main.bundle.js という1つのバンドルにまとめられます。バンドルサイズが大きいと、ユーザーのデバイスやネットワーク接続によっては、アプリケーションの読み込み時間に大きく影響することがあります。App コンポーネントがユーザーの画面にコンテンツをレンダリングする前に、すべてのモジュールを読み込んで解析する必要があります。

幸い、読み込み時間を短縮する方法はたくさんあります！すべてのモジュールを一度にインポートする必要はありません。たとえば、この場合の EmojiPicker のように、ユーザーの操作に応じてのみレンダリングするモジュールや、ページの下の方に表示するモジュールがあるかもしれません。すべてのコンポーネントを静的にインポートする代わりに、App コンポーネントがコンテンツをレンダリングし、ユーザーがアプリケーションを操作できるようになった後で、モジュールを_動的に_インポートできます。

ソース

• patterns.dev/vanilla/static-import