📚

分かった気にするStatic Import

2022/01/19に公開約2,700字

Static Import / 静的インポート

他のモジュールからexportされた関数をimportすること

参考: MDN Web Docs

デフォルトでは、静的にインポートするすべてのmoduleは、最初のrootファイルに追加されます。
ES2015 のデフォルトの import 構文である import module from 'module' を使って import されたモジュールは、静的にインポートされます。

import構文
import defaultExport from "module-name";

では、Reactライブラリを使用し, より具体的な例を見てみましょう。
Chatアプリには、3 つのコンポーネントを静的に読み込んで描画する Chatコンポーネントが含まれています。
UserProfileChatList、そしてメッセージを入力・送信するための ChatInput です。
ChatInputコンポーネント内では、EmojiPickerコンポーネントを静的に読み込んで、ユーザが絵文字をクリックすると、 絵文字ピッカーが表示されるようにしています。

App.js
import React from "react";

import UserInfo from "./components/UserInfo";
import ChatList from "./components/ChatList";
import ChatInput from "./components/ChatInput";

import "./styles.css";

const App = () => (
  <div className="App">
    <UserInfo />
    <ChatList />
    <ChatInput />
  </div>
);

export default App;
./components/ChatInput.js
import React from "react";
import Send from "./icons/Send";
import Emoji from "./icons/Emoji";

import EmojiPicker from "./EmojiPicker";

const ChatInput = () => {
    const [pickerOpen, togglePicker] = React.useReducer(state => !state, false);
    return (
        <div className="chat-input-container">
            <input type="text" placeholder="Type a message..." />
            <Emoji onClick={togglePicker} />
            {pickerOpen && <EmojiPicker />}
            <Send />
        </div>
    );
};

export default ChatInput;

上記のファイルが2つあった場合、 読み込みした行に到達すると即時実行されるので、 読み込み順序は

// App.js
import UserInfo from "./components/UserInfo";   // 1番目
import ChatList from "./components/ChatList";   // 2番目
import ChatInput from "./components/ChatInput"; // 3番目
// ./components/ChatInput.js
import EmojiPicker from "./EmojiPicker";        // 4番目
const ChatInput = () => {...}                   // 5番目 
// App.js
const App = () => {...}                         // 6番目  

コンポーネントは静的に読み込みされているため、Webpackはコンポーネントを最初のファイルにバンドル[1]します。ビルドした後に Webpack が生成するバンドルファイル( 複数のファイル)を見ることができます。

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

main.bundle.jsという1つのバンドルに束ねられます。バンドルサイズが大きいと、ユーザーのデバイスやネットワーク接続によって、Webサイトの読み込み時間に大きな影響を与える可能性があります。
Appコンポーネントがユーザーの画面にコンテンツを表示する前に、まず、すべてのコンポーネントを読み込んで、解析する必要があります。

そして読み込み時間を短縮する方法はたくさんあります。
すべてのコンポーネントを静的に読み込むのではなく、動的に読み込みことで読み込み時間を短縮します
たとえば、この場合の 絵文字ピッカーのように、ユーザーとのインタラクション(タップやクリック)されることで描画するコンポーネントや、 ユーザーには見えていない(viewport外)コンポーネントには、
、ユーザーがWebサイトを操作する時に動的に描画したいタイミングで読み込むことができます。

この記事はこちらを参考に執筆させていただいています。

脚注
  1. バンドル(bundle)は”束にする”という意味です。 ↩︎

GitHubで編集を提案

Discussion

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