乐趣区

关于javascript:Skypack我老早就在布局前端基建了

大家好,我卡颂。

曾经有越来越多前端开发者放弃 webpack,改用vite 作为我的项目打包工具。

其中最次要的起因是 —— vite在开发环境基于 ESM 标准实现的 Nobundle 模式,节俭了 代码打包 的工夫(当然,也有 ESBuild 的功绩)。

而在生产环境,以后仍有打包的需要。

随着浏览器的迭代,ESM标准兼容性越来越好,终有一天会进入 生产环境大面积可用 的状态。

届时 生产环境打包 将不再是刚需。

另一方面,从 HTTP 协定的角度看,在 HTTP/1.1 时代,多个模块被打包成一个文件能缩小 浏览器并发申请数,达到优化目标。

但在 HTTP/2 多路复用遍及后,这么做的意义就不大了。

能够说,当这些基建成熟后,生产环境应用 ESM 模块是瓜熟蒂落的事件。

很多团队预感到这点,很早就开始布局相干产品。明天要介绍的 Skypack 就是这样一款产品。

欢送退出人类高质量前端框架群,带飞

不一样的 CDN

Skypack首次公布于 19 年 6 月(曾用名 Pika CDN),是一款 基于 ESM 标准的 CDN 服务

在浏览器中,常见的 CDN 服务通常以 script 标签的模式引入 UMD 标准的代码,以 ReactDOM 举例:

<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>

代码执行后会在全局裸露对象window.ReactDOM

一些状况下,一个包还会依赖其余包,比方 ReactDOM 还会依赖如下 3 个包:

  • React
  • scheduler
  • object-assign

为了应答这种状况,在生产环境开发者通常会将第三方依赖对立打包。

SkypackESM标准引入代码:

// 在业务代码中引入如下语句
import ReactDOM from 'https://cdn.skypack.dev/react-dom';

浏览器会顺次发动对 包及其依赖 的申请:

配合上浏览器的 Module Preload 个性,能够让这些资源对立预加载。

这就解决了第三方依赖须要打包的问题。

按需 polyfill

如果你拜访上述 CDN 链接(https://cdn.skypack.dev/react…),会发现返回的后果并不是 ReactDOM 的代码,而是上面两句 export 语句:

export * from '/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports/optimized/react-dom.js';
export {default} from '/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports/optimized/react-dom.js';

语句的背地才是 ESM 标准的 ReactDOM 代码。

之所以这么做是因为:Skypack会依据 指标浏览器的 UA为浏览器提供适宜的包。

在高版本 Chrome 中的代码不须要 polyfill,而在低版本IE 中的代码须要 polyfill,所以不同指标浏览器拿到的是不同的ReactDOM 代码。

上述 export 语句中哈希(oZ1BXZ5opQ1DbTh7nu9r)的不同就对应 同一个版本的 ReactDOM 通过不同水平 polyfill 后的不同后果

此外,在 url 后加 min 能失去 压缩后的代码

import ReactDOM from 'https://cdn.skypack.dev/react-dom?min';

接下来让咱们看看 Skypack 是如何解决申请的。

解决申请的流程

并不是所有包都有 ESM 标准的产物(React就没有),当以如下 url 格局拜访任意包时:

// xxx 替换为任意包名
import React from 'https://cdn.skypack.dev/xxx';

如果之前从未有人拜访过这个包,则会 构建包及其依赖的 ESM 产物 并返回。

比方 ReactDOM 自身只提供 UMD 标准的产物,第一个拜访他的 Skypack CDN 链接的用户会经验如下步骤:

  • 收集 ReactDOM 及其依赖
  • ReactDOM 及其依赖变为 ESM 标准
  • 构建不同 polyfill 水平的 ESM 产物
  • 依据指标浏览器 UA 返回对应的ReactDOM

ReactDOM 的产物代码中能够看到,他依赖的三个包曾经转为 ESM 标准:

总结

除了 Skypack 外,esm.sh 也是相似性能的 ESM CDN 服务。

等到前端基建成熟的那天,置信这些 ESM CDN 服务肯定能大放异彩。

退出移动版