CDN提供的JavaScript文件中import语句的执行时机是什么？

问题描述 #

我在阅读一篇关于Web Components的文章时，看到作者提供了一个CDN链接的JavaScript文件，文件内容包含以下ES模块导入语句：

import { getRssFeed } from "./services/medium-feed.js";
import "./components/medium-articles.js";
import "./components/medium-header.js";

我有几个疑问：这些导入操作什么时候实际发生？是不是必须在文件发送到我浏览器前完成，否则我没法访问导入的内容？这是不是意味着文件里的所有代码或者仅导入部分会在发送给我前运行？是CDN完成这些操作的吗？我之前一直以为从外部获取的JS资源只会在浏览器端运行。

解答 #

这些ES模块的导入操作完全是在浏览器端执行的，CDN仅负责提供原始JS文件，不会提前处理或运行代码。

具体执行流程如下：

• 当浏览器通过<script type="module">标签引入该CDN文件时，会先识别这是一个ES模块，随后立即解析文件中的import语句。
• 浏览器会根据import里的相对路径，主动向CDN服务器请求对应的依赖文件（比如./services/medium-feed.js）。
• 只有当所有依赖模块都下载完成并解析完毕后，浏览器才会执行当前模块内除import语句之外的顶层代码。

你觉得“必须提前完成才能访问”，是因为ES模块采用静态解析机制——浏览器会优先处理所有import依赖，确保依赖就绪后才执行模块内容，但这个过程全程在浏览器端完成，不存在服务器端提前运行代码的情况。

额外注意：如果这个JS文件没有通过type="module"的脚本标签引入，浏览器会把import语句当成语法错误，因为普通脚本不支持ES模块语法。

内容的提问来源于stack exchange，提问作者TMcAndrew