设计模式

静态导入

import 关键字允许我们导入另一个模块导出的代码。默认情况下，我们所有静态导入的模块都会添加到初始捆绑包中。使用默认 ES2015 导入语法 (import module from 'module') 导入的模块将进行静态导入。

让我们来看一个例子！一个简单的聊天应用程序包含一个 Chat 组件，其中我们静态导入并渲染了三个组件：UserProfile、ChatList 和 ChatInput 用于输入和发送消息！在 ChatInput 模块中，我们静态导入了一个 EmojiPicker 组件，以便在用户切换表情符号时显示表情符号选择器。

App.js

1import React from "react";
2
3// Statically import Chatlist, ChatInput and UserInfo
4import UserInfo from "./components/UserInfo";
5import ChatList from "./components/ChatList";
6import ChatInput from "./components/ChatInput";
7
8import "./styles.css";
9
10console.log("App loading", Date.now());
11
12const App = () => (
13  <div className="App">
14    <UserInfo />
15    <ChatList />
16    <ChatInput />
17  </div>
18);
19
20export default App;

打开 CodeSandbox

当引擎到达我们导入它们的代码行时，这些模块就会执行。当您打开控制台时，您可以看到模块的加载顺序！

App.js

1import React from "react";
2
3// Statically import Chatlist, ChatInput and UserInfo
4import UserInfo from "./components/UserInfo";
5import ChatList from "./components/ChatList";
6import ChatInput from "./components/ChatInput";
7
8import "./styles.css";
9
10console.log("App loading", Date.now());
11
12const App = () => (
13  <div className="App">
14    <UserInfo />
15    <ChatList />
16    <ChatInput />
17  </div>
18);
19
20export default App;

打开 CodeSandbox

由于组件是静态导入的，Webpack 将这些模块捆绑到初始捆绑包中。我们可以看到 Webpack 在构建应用程序后创建的捆绑包

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

我们的聊天应用程序源代码被捆绑到一个捆绑包中：main.bundle.js。大型捆绑包的大小会显着影响应用程序的加载时间，具体取决于用户的设备和网络连接。在 App 组件能够将内容呈现到用户的屏幕之前，它首先必须加载并解析所有模块。

幸运的是，有很多方法可以加快加载速度！我们并不总是需要一次导入所有模块：可能有些模块只应该根据用户交互进行渲染，例如这种情况下的 EmojiPicker，或者在页面下方渲染。我们可以动态导入模块，而不是静态导入所有组件，这样 App 组件就可以在渲染其内容后进行动态导入，并且用户可以与我们的应用程序进行交互。