Verwenden von ES -Modulen heute im Browser

Verwenden von ES -Modulen in Browsern: Aktueller Status und Zukunft

Kernpunkte:

• ES6 (ES2015) führte den Native Modul Standard JavaScript-Standards ein, aber zunächst schlechte Browser unterstützen LED-Entwickler, um Modullader zu verwenden, um Abhängigkeiten in eine einzelne ES5-kompatible Browserdatei zu bündeln.
• Mainstream -Browser wie Safari, Chrom, Firefox und Edge unterstützen nun die import -Syntax des ES6 -Moduls und ermöglichen eine effizientere und standardisierte Codestruktur.
• Während sich die Unterstützung des ES6 -Moduls weiter verbessert, sind die Erstellung von Tools wie Babel und Webpack immer noch unverzichtbar, da die Browser weiterhin optimiert werden. Durch die Kombination von HTTP2-Multi-Ressourcen-Streaming-Funktionen und Browser-Vorspannungsfunktionen wird das ES-Modul voraussichtlich erhebliche Leistungsverbesserungen mit sich bringen.
• Während Sie jetzt das ES -Modul direkt in modernen Browsern verwenden können, ohne dass ein Übersetzer oder Bundler erforderlich ist, wird weiterhin empfohlen, separate Pakete für ältere Browser zu erstellen. Immer mehr Bibliotheken werden als ES -Module freigegeben, aber sie sind immer noch hauptsächlich auf Bundler und nicht auf Direktimporte ausgerichtet.

Dieser Artikel zeigt, wie das ES -Modul im heutigen Browser verwendet wird.

Vor kurzem hatte JavaScript nicht das Konzept der Module. Es ist unmöglich, eine JavaScript -Datei direkt zu verweisen oder in eine andere Datei einzubeziehen. Wenn die Größe und Komplexität von Anwendungen wachsen, wird das Schreiben von JavaScript für Browser schwierig.

Eine häufige Lösung ist die Verwendung

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

  return el
}</code>

oder als externes Skript:

<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" Fügen Sie einfach <p> <strong></strong></p> zu Ihrem

hinzu

import Anforderungen file:// npx serve

Sie benötigen einen Server, um

für die Extraktion zu verwenden, da er nicht mit

Protokoll funktioniert. Sie können

verwenden, um einen Server im aktuellen Verzeichnis für lokale Tests zu starten. browser-es-module-loader

Wenn Sie ES -Module auf einer anderen Domäne laden möchten, müssen Sie CORs aktivieren.

Wenn Sie mutig genug sind, um dies jetzt in der Produktion zu versuchen, müssen Sie weiterhin separate Pakete für ältere Browser erstellen. Eine Polyfill ist in angegeben, die der Spezifikation folgt. Dies wird jedoch überhaupt nicht für Produktionsumgebungen empfohlen.

Leistung

Verwerfen Sie Build -Tools wie Babel und WebPack nicht sofort, da Browser immer noch Methoden zur Optimierung der Extraktion implementieren. Trotzdem gibt es immer noch Leistungsstoffe und Vorteile bei der zukünftigen Verwendung von ES -Modulen.

<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=&quot;module&quot;> import { tag } from './html.js' const h1 = tag('h1', '? Hello Modules!') document.body.appendChild(h1) </script> Warum müssen wir binden <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> Heute bündeln wir JavaScript, um die Anzahl der ausgestellten HTTP -Anforderungen zu verringern, da das Netzwerk normalerweise der langsamste Teil des Ladens von Webseiten ist. Dies ist heute noch eine sehr effektive Frage, aber die Zukunft ist hell: Das ES-Modul kombiniert HTTP2-Multi-Ressourcen-Streaming-Funktionen und Browser-Vorspannungsfunktionen.

vorladen

link rel="modulepreload" wird in einem Browser in Ihrer Nähe angezeigt. Der Browser muss nicht alle Modulimporte einzeln analysieren, wodurch der unten gezeigte Netzwerkwasserfall erzeugt wird ...

<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>

Sie können den Wasserfall steuern, indem Sie die Browser -Seite im Voraus mitteilen, dass html.js und 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 und Server Push

http2 kann mehrere Ressourcen in einer einzigen Antwort im Vergleich zu http1.1 drücken, was nur eine Ressource übertragen kann. Dies wird dazu beitragen, Netzwerkrundreisen zu minimieren.

In unserem Beispiel können

, index.html und app.js in einer einzigen Anfrage übergeben werden: html.js

--- & gt;

cache

Das Übergeben mehrerer kleinerer ES -Module kann dem Cache zugute kommen, da der Browser nur die geänderten Module extrahieren muss. Das Problem bei der Generierung großer Pakete ist, dass beim Ändern einer Codezeile das gesamte Paket ungültig wird.

/

async defer es Module blockieren das Rendern nicht standardmäßig, genau wie

Wenn wir nur die erforderlichen Funktionen importieren, wird die Anzahl der Anforderungen auf

119 : reduziert

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

Dies ist nur ein Beispiel, um zu demonstrieren, dass Lodash-ES nicht so gebaut wurde, dass sie direkt im Browser geladen werden. Dazu müssen Sie weiterhin Ihr eigenes Paket mit dem ES -Modul als Ziel erstellen.

(Kann ich hier das ES6-Modul-Formular verwenden)

Es ist Zeit, mit dem ES -Modul in Ihrem Browser zu experimentieren. Bald können Sie sie in allen modernen Browsern ohne Übersetzer oder Bundler verwenden (falls Sie es vorziehen).

(Der FAQ -Teil sollte hier eingefügt werden, der Inhalt ist der gleiche wie der Originaltext)

Das obige ist der detaillierte Inhalt vonVerwenden von ES -Modulen heute im Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!