乐趣区

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

jiezi

大家好，我卡颂。

曾经有越来越多前端开发者放弃 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

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

而 Skypack 以ESM标准引入代码：

// 在业务代码中引入如下语句
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 服务肯定能大放异彩。

退出移动版