Using ES Modules in the Browser Today

Using ES modules in browsers: Current status and future

Core points:

• ES6 (ES2015) introduced the JavaScript native module standard, but initially poor browser support led developers to use module loaders to bundle dependencies into a single ES5-compatible browser file.
• Mainstream browsers such as Safari, Chrome, Firefox, and Edge now support the import syntax of the ES6 module, enabling a more efficient and standardized code structure.
• While the ES6 module's support continues to improve, build tools such as Babel and Webpack are still indispensable as browsers continue to be optimized. Combining HTTP2's multi-resource streaming capabilities and browser preloading capabilities, the ES module is expected to bring significant performance improvements.
• While now you can use the ES module directly in modern browsers without the need for a translator or bundler, it is still recommended to create separate packages for older browsers. More and more libraries are starting to be released as ES modules, but they are still primarily targeted at bundlers rather than direct imports.

This article will demonstrate how to use the ES module in today's browser.

Before recently, JavaScript did not have the concept of modules. It is impossible to directly reference or include a JavaScript file into another file. As application size and complexity grow, this makes writing JavaScript for browsers tricky.

A common solution is to use

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

  return el
}</code>

Or as an external script:

<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"Simply add <p> <strong></strong></p> to your

importRequirementsfile://npx serve

You need a server to use

for extraction, as it does not work with

protocol. You can use

to start a server in the current directory for local testing. browser-es-module-loader

If you want to load ES modules on a different domain, you need to enable CORS.

If you are bold enough to try this in production now, you still need to create separate packages for older browsers. A polyfill is provided in which follows the specification. However, this is not recommended for production environments at all.

Performance

Don't discard build tools like Babel and Webpack immediately, because browsers are still implementing methods for optimizing extraction. Nevertheless, there are still performance pitfalls and advantages in future use of ES modules.

<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>Why do we need to bind <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>Today, we bundle JavaScript to reduce the number of HTTP requests issued, because the network is usually the slowest part of loading web pages. This is still a very effective question today, but the future is bright: the ES module combines HTTP2's multi-resource streaming capabilities and browser preloading capabilities.

Preload

link rel="modulepreload" will appear in a browser near you. The browser does not need to parse all module imports one by one, thus producing the network waterfall shown below...

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

You can control the waterfall by telling the browser page in advance that html.js and 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 and server push

HTTP2 is able to push multiple resources in a single response compared to HTTP1.1, which can only transmit one resource. This will help minimize network round trips.

In our example,

, index.html and app.js can be passed in a single request: html.js

---> GET /index.html

Cache

Passing multiple smaller ES modules may benefit the cache because the browser only needs to extract the changed modules. The problem with generating large packages is that if you change a line of code, it will invalidate the entire package.

/asyncdefer

ES modules do not block rendering by default, just like

If we import only the required functions, the number of requests will be reduced to 119 :

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

This is just an example to demonstrate that lodash-es has not been built to load directly in the browser. To do this, you still need to create your own package using the ES module as the target.

(Can I Use es6-module form should be inserted here)

It's time to start experimenting with the ES module in your browser. Soon, you can use them in all modern browsers without a translator or bundler (if you prefer).

(The FAQ part should be inserted here, the content is the same as the original text)

The above is the detailed content of Using ES Modules in the Browser Today. For more information, please follow other related articles on the PHP Chinese website!