Menggunakan modul ES dalam penyemak imbas hari ini

menggunakan modul ES dalam pelayar: Status Semasa dan Masa Depan

mata teras:

ES6 (ES2015) memperkenalkan standard modul asli JavaScript, tetapi pada mulanya penyemak imbas sokongan LED pemaju untuk menggunakan pemuat modul untuk membungkus kebergantungan ke dalam satu fail penyemak imbas yang serasi ES5.
Penyemak imbas arus perdana seperti Safari, Chrome, Firefox, dan Edge kini menyokong sintaks
• modul ES6, membolehkan struktur kod yang lebih cekap dan standard. import
Walaupun sokongan modul ES6 terus bertambah baik, membina alat seperti Babel dan Webpack masih sangat diperlukan kerana penyemak imbas terus dioptimumkan. Menggabungkan keupayaan streaming multi-sumber HTTP2 dan keupayaan preloading pelayar, modul ES dijangka membawa peningkatan prestasi yang signifikan.
Walaupun sekarang anda boleh menggunakan modul ES secara langsung dalam pelayar moden tanpa memerlukan penterjemah atau bundler, masih disyorkan untuk membuat pakej berasingan untuk pelayar yang lebih tua. Semakin banyak perpustakaan mula dibebaskan sebagai modul ES, tetapi mereka masih disasarkan pada bundlers dan bukannya import langsung.

Artikel ini akan menunjukkan cara menggunakan modul ES dalam penyemak imbas hari ini.

Sebelum baru -baru ini, JavaScript tidak mempunyai konsep modul. Tidak mustahil untuk merujuk secara langsung atau memasukkan fail JavaScript ke dalam fail lain. Apabila saiz permohonan dan kerumitan berkembang, ini menjadikan penulisan JavaScript untuk pelayar rumit.

Penyelesaian yang sama adalah menggunakan

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

  return el
}</code>

atau sebagai skrip luaran:

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

Cukup tambah type="module" ke <p> <strong></strong></p> anda

import file:// Keperluan npx serve

anda memerlukan pelayan untuk menggunakan

untuk pengekstrakan, kerana ia tidak berfungsi dengan protokol

. Anda boleh menggunakan browser-es-module-loader untuk memulakan pelayan dalam direktori semasa untuk ujian tempatan.

Jika anda ingin memuatkan modul ES pada domain yang berbeza, anda perlu mengaktifkan CORS. Jika anda cukup berani untuk mencuba ini dalam pengeluaran sekarang, anda masih perlu membuat pakej berasingan untuk pelayar yang lebih tua. Polyfill disediakan dalam

yang mengikuti spesifikasi. Walau bagaimanapun, ini tidak disyorkan untuk persekitaran pengeluaran sama sekali.

Prestasi

Jangan buang alat binaan seperti Babel dan Webpack dengan segera, kerana pelayar masih melaksanakan kaedah untuk mengoptimumkan pengekstrakan. Walau bagaimanapun, masih terdapat perangkap dan kelebihan prestasi dalam penggunaan modul ES masa depan. <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> mengapa kita perlu mengikat <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> Hari ini, kami membungkus JavaScript untuk mengurangkan bilangan permintaan HTTP yang dikeluarkan, kerana rangkaian biasanya merupakan bahagian paling lambat untuk memuatkan laman web. Ini masih merupakan soalan yang sangat berkesan hari ini, tetapi masa depan cerah: modul ES menggabungkan keupayaan streaming pelbagai sumber HTTP2 dan keupayaan preloading pelayar.

preload

link rel="modulepreload" akan muncul dalam penyemak imbas berhampiran anda. Penyemak imbas tidak perlu menghuraikan semua modul import satu demi satu, dengan itu menghasilkan air terjun rangkaian yang ditunjukkan di bawah ...

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

anda boleh mengawal air terjun dengan memberitahu halaman penyemak imbas terlebih dahulu bahawa html.js dan 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 dan tolak pelayan

HTTP2 dapat menolak pelbagai sumber dalam satu tindak balas berbanding HTTP1.1, yang hanya boleh menghantar satu sumber. Ini akan membantu meminimumkan perjalanan pusingan rangkaian.

dalam contoh kami,

, index.html dan app.js boleh diluluskan dalam satu permintaan: html.js

--- & gt;

Cache

Melewati pelbagai modul ES yang lebih kecil boleh memberi manfaat kepada cache kerana penyemak imbas hanya perlu mengekstrak modul yang diubah. Masalah dengan menjana pakej besar ialah jika anda menukar garis kod, ia akan membatalkan keseluruhan pakej.

/

async defer modul es tidak menyekat rendering secara lalai, sama seperti

Jika kita mengimport hanya fungsi yang diperlukan, bilangan permintaan akan dikurangkan kepada

119 :

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

Ini hanyalah satu contoh untuk menunjukkan bahawa Lodash-es belum dibina untuk dimuat secara langsung dalam penyemak imbas. Untuk melakukan ini, anda masih perlu membuat pakej anda sendiri menggunakan modul ES sebagai sasaran.

(bolehkah saya menggunakan borang ES6-modul harus dimasukkan di sini)

Sudah tiba masanya untuk mula bereksperimen dengan modul ES dalam penyemak imbas anda. Tidak lama lagi, anda boleh menggunakannya dalam semua pelayar moden tanpa penterjemah atau bundler (jika anda lebih suka).

(bahagian Soalan Lazim harus dimasukkan di sini, kandungannya sama dengan teks asal)

Atas ialah kandungan terperinci Menggunakan modul ES dalam penyemak imbas hari ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!