import 关键字允许导入由另一个模块导出的代码。
默认情况下，静态导入的所有模块都会添加到初始包中。
使用默认的 ES2015 导入语法 import module from 'module' 导入的模块是静态导入的。
看一个例子！ 一个简单的聊天应用程序包含一个 Chat 组件，
在其中静态导入和呈现三个组件：UserProfile、ChatList 和用于键入和发送消息的 ChatInput！
在 ChatInput 模块中，静态导入了一个 EmojiPicker 组件，以便在用户切换表情符号时向用户显示表情符号选择器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
// components/Userinfo.js
import React from "react";
const UserInfo = () => (
<div className="user-info upper">
<div className="user-details">
<div className="user-avatar" />
<div className="user-name">
John Doe
<span className="user-status">Online</span>
</div>
</div>
</div>
);
console.log("UserInfo loading", Date.now());
export default UserInfo;
// components/ChatList.js
import React from "react";
import messages from "../data/messages";
const ChatMessage = ({ message, side }) => (
<div className={`msg-container ${side}`}>
<div className="chat-msg">
<div className="msg-contents">{message}</div>
</div>
</div>
);
const ChatList = () => (
<div className="chat-list">
{messages.map(message => (
<ChatMessage
message={message.body}
key={message.id}
side={["left", "right"][Number(message.senderId === 1)]}
/>
))}
</div>
);
console.log("ChatList loading", Date.now());
export default ChatList;
// components/ChatInput.js
import React from "react";
import Send from "./icons/Send";
import Emoji from "./icons/Emoji";
import Picker 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 && <Picker />}
<Send />
</div>
);
};
console.log("ChatInput loaded", Date.now());
export default ChatInput;
// components/EmojiPicker.js
import React from "react";
import Picker from "emoji-picker-react";
const EmojiPicker = () => (
<div className="emoji-picker">
<Picker />
</div>
);
console.log("EmojiPicker loading", Date.now());
export default EmojiPicker;
// App.js
import React from "react";
import "./styles.css";
// Statically import Chatlist, ChatInput and UserInfo
import UserInfo from "./components/UserInfo";
import ChatList from "./components/ChatList";
import ChatInput from "./components/ChatInput";
const App = () => {
return (
<div className="App">
<UserInfo />
<ChatList />
<ChatInput />
</div>
);
};
export default App;
|
一旦引擎到达导入它们的行，模块就会立即执行。
当你打开控制台时，你可以看到模块加载的顺序！
UserInfo loading 1640280171226
ChatList loading 1640280171229
EmojiPicker loading 1640280171278
ChatInput loading 1640280171278
App loading 1640280171279
由于组件是静态导入的，Webpack 将模块捆绑到初始包中。
可以看到 Webpack 在构建应用程序后创建的包：
Asset Size Chunks Chunk Names
main.bundle.js 1.5 MiB main [emitted] main
聊天应用程序的源代码被打包成一个包：main.bundle.js。
根据用户的设备和网络连接，大的包大小会显著影响应用程序的加载时间。
在 App 组件能够将其内容呈现到用户屏幕之前，它首先必须加载和解析所有模块。
幸运的是，有很多方法可以加快加载时间！ 并不总是必须一次导入所有模块：
也许有一些模块应该只根据用户交互来呈现，
例如本例中的 EmojiPicker，或者在页面的更下方呈现。
可以在 App 组件呈现其内容并且用户能够与应用程序交互后动态导入模块，而不是静态导入所有组件。
知识点