今天在瀏覽器中使用ES模塊
- Jennifer Aniston原創
- 2025-02-15 10:26:12206瀏覽
瀏覽器中使用 ES 模塊：現狀與未來
核心要點：
- 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
如果您現在大膽地在生產環境中嘗試這樣做，您仍然需要為舊版瀏覽器創建單獨的包。在 中提供了一個 polyfill，它遵循規範。但是，這根本不推薦用於生產環境。
性能不要立即丟棄 Babel 和 Webpack 等構建工具，因為瀏覽器仍在實現優化提取的方法。儘管如此，未來使用 ES 模塊仍存在性能方面的陷阱和優勢。
<script> 标签在网页中加载任意脚本。但是，这会带来自身的问题。例如，每个脚本都会发起一个阻塞渲染的 HTTP 请求，这会使 JS 密集型页面感觉迟钝缓慢。依赖项管理也变得复杂，因为加载顺序很重要。 <p>ES6 (ES2015) 通过引入单一的原生模块标准在一定程度上解决了这个问题。（您可以在此处阅读有关 ES6 模块的更多信息。）但是，由于浏览器对 ES6 模块的初始支持较差，人们开始使用模块加载器将依赖项捆绑到单个兼容 ES5 的浏览器文件中。此过程会引入自身的问题和复杂性。 <p>但好消息即将到来。浏览器支持越来越好，所以让我们看看如何在今天的浏览器中使用 ES6 模块。 <p><strong>当前 ES 模块的现状 <p>Safari、Chrome、Firefox 和 Edge 都支持 ES6 模块的 <code>import 语法。它们看起来像这样： <pre class="brush:php;toolbar:false"><code class="language-html"><script type="module"> import { tag } from './html.js' const h1 = tag('h1', '? Hello Modules!') document.body.appendChild(h1) </script>為什麼我們需要捆綁 <script> 标签中，浏览器就会将它们加载为 ES 模块。浏览器将遵循所有导入路径，每个模块仅下载和执行一次。 <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958637676760.jpg" class="lazy" alt="Using ES Modules in the Browser Today " /> <p>旧版浏览器不会执行具有未知“type”的脚本，但您可以使用 <code>nomodule 属性定义回退脚本： <pre class="brush:php;toolbar:false"><code class="language-html"><script nomodule src="https://unpkg.com/browser-es-module-loader/dist/babel-browser-build.js"></script>今天，我們捆綁 JavaScript 以減少發出的 HTTP 請求數量，因為網絡通常是加載網頁速度最慢的部分。這在今天仍然是一個非常有效的問題，但未來是光明的：ES 模塊結合 HTTP2 的多資源流傳輸能力以及瀏覽器預加載功能。預加載
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部分，內容與原文相同)
<script> 标签在网页中加载任意脚本。但是，这会带来自身的问题。例如，每个脚本都会发起一个阻塞渲染的 HTTP 请求，这会使 JS 密集型页面感觉迟钝缓慢。依赖项管理也变得复杂，因为加载顺序很重要。 <p>ES6 (ES2015) 通过引入单一的原生模块标准在一定程度上解决了这个问题。（您可以在此处阅读有关 ES6 模块的更多信息。）但是，由于浏览器对 ES6 模块的初始支持较差，人们开始使用模块加载器将依赖项捆绑到单个兼容 ES5 的浏览器文件中。此过程会引入自身的问题和复杂性。 <p>但好消息即将到来。浏览器支持越来越好，所以让我们看看如何在今天的浏览器中使用 ES6 模块。 <p><strong>当前 ES 模块的现状 <p>Safari、Chrome、Firefox 和 Edge 都支持 ES6 模块的 <code>import 语法。它们看起来像这样： <pre class="brush:php;toolbar:false"><code class="language-html"><script type="module"> import { tag } from './html.js' const h1 = tag('h1', '? Hello Modules!') document.body.appendChild(h1) </script>以上是今天在瀏覽器中使用ES模塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！