首页 >web前端 >js教程 >今天在浏览器中使用ES模块

今天在浏览器中使用ES模块

Jennifer Aniston原创: 2025-02-15 10:26:12180浏览

浏览器中使用 ES 模块：现状与未来

Using ES Modules in the Browser Today

核心要点：

ES6 (ES2015) 引入了 JavaScript 原生模块标准，但最初浏览器支持度较差，导致开发者使用模块加载器将依赖项捆绑到单个兼容 ES5 的浏览器文件中。
Safari、Chrome、Firefox 和 Edge 等主流浏览器现在都支持 ES6 模块的 import 语法，从而实现更高效、更规范的代码结构。
尽管 ES6 模块的支持度不断提高，但由于浏览器仍在不断优化，因此 Babel 和 Webpack 等构建工具目前仍不可或缺。结合 HTTP2 的多资源流传输能力和浏览器预加载功能，ES 模块有望带来显着的性能提升。
虽然现在可以在现代浏览器中直接使用 ES 模块，无需转译器或捆绑器，但仍建议为旧版浏览器创建单独的包。越来越多的库开始以 ES 模块的形式发布，但它们仍然主要面向捆绑器，而非直接导入。

本文将演示如何在今天的浏览器中使用 ES 模块。

在最近之前，JavaScript 并没有模块的概念。无法直接引用或包含一个 JavaScript 文件到另一个文件中。随着应用程序规模和复杂性的增长，这使得为浏览器编写 JavaScript 变得棘手。

一种常见的解决方案是使用

<code class="language-javascript">// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}</code>

或者作为外部脚本：

<code class="language-html"></code>

<code class="language-javascript">// app.js
import { tag } from './html.js'

const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)</code>

type="module"只需将 <p> <strong></strong></p> 添加到您的

import要求file://npx serve

您需要一个服务器才能使用

进行提取，因为它不适用于

协议。您可以使用

在当前目录中启动一个服务器以进行本地测试。 browser-es-module-loader

如果您想在不同的域上加载 ES 模块，则需要启用 CORS。

如果您现在大胆地在生产环境中尝试这样做，您仍然需要为旧版浏览器创建单独的包。在 中提供了一个 polyfill，它遵循规范。但是，这根本不推荐用于生产环境。

性能

不要立即丢弃 Babel 和 Webpack 等构建工具，因为浏览器仍在实现优化提取的方法。尽管如此，未来使用 ES 模块仍存在性能方面的陷阱和优势。

预加载

link rel="modulepreload" 即将出现在您附近的浏览器中。浏览器无需逐个解析所有模块导入，从而产生如下所示的网络瀑布……

<code class="language-javascript">// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}</code>

<code class="language-html"></code>

您可以提前告诉浏览器页面需要 html.js 和 lib.js，从而控制瀑布：

<code class="language-javascript">// app.js
import { tag } from './html.js'

const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)</code>

HTTP2 与服务器推送

与只能传输一个资源的 HTTP1.1 相比，HTTP2 能够在一个响应中推送多个资源。这将有助于最大限度地减少网络往返次数。

在我们的示例中，可以在单个请求中传递 index.html、app.js 和 html.js：

---> GET /index.html

缓存

传递多个较小的 ES 模块可能会使缓存受益，因为浏览器只需要提取已更改的模块。生成大型包的问题在于，如果您更改一行代码，则会使整个包失效。

`async`/`defer`

ES 模块默认情况下不会阻塞渲染，就像

如果我们只导入需要的函数，请求数量会减少到 119 个

：

<code class="language-html"></code>

这只是一个例子，用于演示 lodash-es 尚未构建为直接在浏览器中加载。要做到这一点，您仍然需要使用 ES 模块作为目标创建自己的包。

(此处应插入Can I Use es6-module表格)

现在是开始在浏览器中试验 ES 模块的时候了。很快，您就可以在所有现代浏览器中使用它们，而无需转译器或捆绑器（如果您愿意）。

(此处应插入FAQ部分，内容与原文相同)

以上是今天在浏览器中使用ES模块的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript firefox chrome safari html es6 edge webpack using JS http

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Clean Code with ES6 Default Parameters & Property Shorthands下一篇：An Introduction to TypeScript: Static Typing for the Web

查看更多

今天在浏览器中使用ES模块

浏览器中使用 ES 模块：现状与未来

预加载

HTTP2 与服务器推送

缓存

async/defer

相关文章

`async`/`defer`