Ja vaScript 模块在被导入时，会立即执行其顶层（模块作用域）的所有语句，包括 import 声明、console.log、fetch 调用等；这与组件函数是否被调用无关，是 ES 模块规范的核心行为。

你是否遇到过这种情况：仅仅导入了一个 React 组件，控制台却提前打印出了日志？或者，一个简单的图片导入，意外触发了网络请求？

这背后，是 Ja vaScript 模块系统一个关键但常被忽视的特性：导入即执行。

模块导入的实际行为

在 React 应用中，当你在 `main.js`（或 `index.js`）中写下这行代码时：

import App from './App.js';

你做的远不止“引用”一个 `App` 函数。实际上，你完整加载并执行了整个 `App.js` 模块。这意味着，模块顶层作用域里的所有语句，都会按顺序、同步地执行一遍，无论它们是否位于最终导出的函数或组件内部。

代码示例解析

来看一个具体的例子。假设 `App.js` 的内容如下：

import Alexa from './alexa.png';
import Siri from './siri.png';
import Cortana from './cortana.png';

console.log(Siri);      //  执行：打印图片路径（如 '/static/media/siri.abc123.png'）
console.log(Alexa);
console.log(Cortana);

export default function App() {
  return (
    

      
Hello, React world!!!
      
      
      
    
  );
}

这里发生了什么？我们来拆解一下：

• import 语句：这不仅仅是声明。在构建时（Webpack/Vite 等工具），它们会触发静态资源解析，图片路径会被处理成带哈希的最终 URL。
• console.log(...)：这几行日志会在模块初始化的瞬间就输出到控制台。这个时间点，远早于 `` 组件被渲染，甚至可能早于 React 框架本身启动。
• export default function：这里定义并导出了 `App` 函数对象。但请注意，函数体内部的代码（也就是返回 JSX 的那部分），只有在 React 实际调用这个函数进行渲染时才会执行。

模块系统的本质

这揭示了 Ja vaScript 模块系统的本质：每一个模块都是一个独立的执行单元，拥有自己的作用域。其顶层语句共同构成了模块的“初始化阶段”。模块不是惰性的模板或声明集，而是一段实实在在的脚本，在首次被 `import` 的那一刻，就会严格按序求值。

类比 CommonJS 模块

如果你熟悉 Node.js 的 CommonJS，可以这样理解：就像 `require('./config.js')` 会立刻运行其中的 `process.env.DB_URL = ...` 和 `console.log('Config loaded')` 一样，ES 模块同样遵循“导入即执行”的原则。这正是模块系统实现可靠依赖注入、副作用注册（比如加载全局样式、引入 Polyfill、初始化日志系统）的基石。

开发中的注意事项

• 避免在模块顶层放置有状态的副作用：比如 `localStorage.setItem`、`document.cookie = ...` 这类操作，除非你明确希望每次导入模块时都触发它们，否则最好封装起来。
• 延迟执行靠封装：如果某些逻辑不需要在导入时立即运行，应该将其封装进函数、类方法中，或者在 React 组件内使用 `useEffect` Hook。
• 图片 import 是语法糖：像 `import ... from ‘.png’` 这样的语句，是构建工具提供的特殊语法。它导入的并不是图片的二进制数据，而是经过解析后的 URL 字符串。
• 模块缓存机制：放心，多次导入同一个模块路径，其顶层代码只会执行一次。模块系统有缓存机制来保证这一点。

总结

说到底，`import` 不仅仅是一个“声明式引用”，它更是一个“指令式加载”的命令。透彻理解“导入即执行”这一机制，是掌握现代前端构建流程、进行合理的模块化设计、以及高效调试复杂应用的关键前提。下次看到控制台里提前出现的日志时，你就知道该从哪里入手思考了。