Skypack布局前端基建实现过程详解

3403771864 发布于2022-09-12 20:50 / 424人阅读

　　用vite作为项目打包工具，这是为什么？其中最主要的原因是 ——vite在开发环境基于ESM规范实现的Nobundle模式，节省了代码打包的时间。

　　当前打包的需求任然有，且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规范：

　结尾：其实很多功能都在日益变化，增加，不断的更新学习才是我们的思路。

私有云服务器托管存储过程详解 linux启动过程详解服务器开机过程详解自定义布局怎么实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127676.html

新的一年，中国云计算有哪些新的亮点和变化？

摘要：通过新鲜出炉的调研数据让我们一起来看看年中国市场云计算有哪些新的亮点和变化云计算持续增长，云原生成主要驱动力云依旧是企业级用户年的第一战略重点。调查显示图，目前中国企业将通过企业级一致性混合多云布局工业互联网作为战略重点。云计算从最初的概念到如今的广泛落地，企业上云之路在逐渐丰富的同时，对于云的需求也在逐渐发生变化就IT现代化，相对于早期的云敏态和传统架构稳态，如今企业用户面临更多的是如何打...

Tecode 2022-06-28 18:59 评论0 收藏0
技术栈：小菜前端的技术栈是如何规划和演进的

摘要：本文以管理者的视角，与大家分享下我自年月入职小菜后，与前端同学一起是如何规划团队的技术栈的，这条技术栈上的技能点又是如何在不同童鞋不同业务中生长出来的。 Scott 近两年无论是面试还是线下线上的技术分享，遇到许许多多前端同学，由于团队原因，个人原因，职业成长，技术方向，甚至家庭等等原因，在理想国与现实之间，在放弃与坚守之间，摇摆不停，心酸硬抗，大家可以找我聊聊南聊聊北，对工程师的宿命...

betacat 2019-08-23 17:09 评论0 收藏0
与企业连体的百度云，正在编织一张生态大网

摘要：乘着云计算强劲发展的东风，百度云继续加固生态化护城河。百度云编织的生态巨网事实上，百度云在生态和落地方面的加速度很明显。从年开放运营至今，百度云俨然已经编织了一张巨大的生态之网，具体可以从三个方面来细看。乘着云计算、AI强劲发展的东风，百度云继续加固生态化护城河。12月6日，在2018百度ABC Inspire企业智能大会上，百度副总裁、百度云总经理尹世明宣布ABC企业智能合作伙伴联盟正式成...

Baaaan 2019-04-29 19:29 评论0 收藏0
ELSE 技术周刊(2017.11.27期)

摘要：而且已开源出来，随着容器技术发展，大文件分发一直是个重要的问题，所以是一件值得研究的技术。实用推荐檢定攻略是近期推出的一项认证，用以认证开发者的移动网页开发技能。净化，移除中不必要的文件技术周刊由小组出品，汇聚一周好文章，周刊原文。业界动态直击阿里双11神秘技术：PB级大规模文件分发系统蜻蜓文章主要介绍了阿里的PB级大规模文件分发系统蜻蜓，通过使用P2P技术同时结合智能压缩、智...

xushaojieaaa 2019-08-21 17:49 评论0 收藏0
让私有云持续进化，UCloudStack2.0强势升级

摘要：随着新基建进程以及企业上云步伐的加快，私有云市场正迎来黄金发展阶段，作为拥有公有云基因的云计算服务商，将公有云核心能力输出至私有云产品，于年用户大会上正式推出轻量级私有云产品。随着新基建进程以及企业上云步伐的加快，私有云市场正迎来黄金发展阶段，UCloud作为拥有公有云基因的云计算服务商，将公有云核心能力输出至私有云产品，于2020年用户大会上正式推出UCloudStack2.0轻量级私有云...

Tecode 2022-06-28 18:59 评论0 收藏0