Utilisation des modules ES dans le navigateur aujourd'hui

Utilisation des modules ES dans les navigateurs: statut actuel et futur

Points de base:

• ES6 (ES2015) a introduit la norme du module natif JavaScript, mais initialement, les développeurs LED du navigateur sont initialement médiocres à utiliser des chargeurs de modules pour regrouper les dépendances dans un seul fichier de navigateur compatible ES5.
• Les navigateurs traditionnels tels que Safari, Chrome, Firefox et Edge prennent désormais en charge la syntaxe import du module ES6, permettant une structure de code plus efficace et standardisée.
• Bien que le support du module ES6 continue de s'améliorer, les outils de construction tels que Babel et WebPack sont toujours indispensables à mesure que les navigateurs continuent d'être optimisés. En combinant les capacités de streaming multi-ressources de HTTP2 et les capacités de préchargement du navigateur, le module ES devrait apporter des améliorations de performances significatives.
• Bien que vous puissiez maintenant utiliser le module ES directement dans les navigateurs modernes sans avoir besoin d'un traducteur ou d'un bundler, il est toujours recommandé de créer des packages séparés pour les navigateurs plus anciens. De plus en plus de bibliothèques commencent à être publiées sous forme de modules ES, mais ils sont toujours principalement destinés aux bundlers plutôt qu'aux importations directes.

Cet article montrera comment utiliser le module ES dans le navigateur d'aujourd'hui.

Avant récemment, JavaScript n'avait pas le concept de modules. Il est impossible de référencer directement ou d'inclure un fichier JavaScript dans un autre fichier. À mesure que la taille et la complexité de l'application augmentent, cela rend l'écriture JavaScript pour les navigateurs délicat.

Une solution courante consiste à utiliser

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

  return el
}</code>

ou comme script externe:

<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" Ajoutez simplement <p> <strong></strong></p> à votre

import exigences file:// npx serve

Vous avez besoin d'un serveur pour utiliser

pour l'extraction, car il ne fonctionne pas avec le protocole

. Vous pouvez utiliser

pour démarrer un serveur dans le répertoire actuel pour les tests locaux. browser-es-module-loader

Si vous souhaitez charger des modules ES sur un domaine différent, vous devez activer les COR.

Si vous êtes assez audacieux pour essayer ceci en production maintenant, vous devez toujours créer des packages séparés pour les navigateurs plus anciens. Un polyfill est fourni dans qui suit la spécification. Cependant, cela n'est pas du tout recommandé pour les environnements de production.

Performance

Ne jetez pas les outils de construction comme Babel et WebPack immédiatement, car les navigateurs implémentent toujours des méthodes pour optimiser l'extraction. Néanmoins, il y a encore des pièges de performance et des avantages dans l'utilisation future des modules 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=&quot;module&quot;> import { tag } from './html.js' const h1 = tag('h1', '? Hello Modules!') document.body.appendChild(h1) </script> Pourquoi avons-nous besoin de lier <script> 标签中，浏览器就会将它们加载为 ES 模块。浏览器将遵循所有导入路径，每个模块仅下载和执行一次。 <p><img src="https://img.php.cn/upload/article/000/000/000/173958637676760.jpg" 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> Aujourd'hui, nous regroupons JavaScript pour réduire le nombre de demandes HTTP émises, car le réseau est généralement la partie la plus lente du chargement des pages Web. C'est encore une question très efficace aujourd'hui, mais l'avenir est brillant: le module ES combine les capacités de streaming multi-ressources de HTTP2 et les capacités de préchargement du navigateur.

Preload

link rel="modulepreload" apparaîtra dans un navigateur près de chez vous. Le navigateur n'a pas besoin d'analyser toutes les importations de modules une par une, produisant ainsi la cascade du réseau illustrée ci-dessous ...

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

Vous pouvez contrôler la cascade en disant à la page du navigateur à l'avance que html.js et 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 et serveur push

http2 est capable de pousser plusieurs ressources en une seule réponse par rapport à HTTP1.1, qui ne peut transmettre qu'une seule ressource. Cela aidera à minimiser les aller-retour en réseau.

Dans notre exemple,

, index.html et app.js peuvent être transmis en une seule demande: html.js

--- & gt;

cache

passer plusieurs modules ES plus petits peut bénéficier au cache car le navigateur n'a besoin que d'extraire les modules modifiés. Le problème avec la génération de grands packages est que si vous modifiez une ligne de code, cela invalidera l'ensemble du package.

/

async Les modules defer ES ne bloquent pas le rendu par défaut, tout comme

Si nous n'importons que les fonctions requises, le nombre de demandes sera réduit à

119 :

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

Ce n'est qu'un exemple pour démontrer que Lodash-ES n'a pas été construit pour se charger directement dans le navigateur. Pour ce faire, vous devez toujours créer votre propre package en utilisant le module ES comme cible.

(Puis-je utiliser le formulaire de module es6 doit être inséré ici)

Il est temps de commencer à expérimenter le module ES dans votre navigateur. Bientôt, vous pouvez les utiliser dans tous les navigateurs modernes sans traducteur ni bundler (si vous préférez).

(La partie FAQ doit être insérée ici, le contenu est le même que le texte d'origine)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!