我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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 class="lazy" data-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服务一定能大放异彩。

以上就是Skypack布局前端基建实现过程详解的详细内容,更多关于Skypack布局前端基建的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Skypack布局前端基建实现过程是什么

这篇文章主要介绍“Skypack布局前端基建实现过程是什么”,在日常操作中,相信很多人在Skypack布局前端基建实现过程是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Skypack布局前端基建实现过程
2023-07-02

基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程

这篇文章主要介绍了基于Vue3实现一个前端埋点上报插件并打包发布到npm,本项目采用pnpm进行Monorepo环境搭建,因为未来这个项目可能会加入更多的工具包,需要的朋友可以参考下
2022-11-13

Android实现RecyclerView嵌套流式布局的详细过程

最近在做需求的时候,碰到有各种筛选项的界面,下面这篇文章主要给大家介绍了关于Android实现RecyclerView嵌套流式布局的详细过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-12-24

Vueelectron前端开启局域网接口实现流程详细介绍

用electron写了一个自己用的小软件,无后端,纯本地的数据。最近想着开发一个手机端app,将PC端的数据进行同步。为了这小小的功能单独写个后端又麻烦。干脆前后端不分离哈哈,直接在前端软件中开启接口
2022-11-13

JavaScript控制语句及搭建前端服务器的过程详解

这篇文章主要介绍了JavaScript控制语句及搭建前端服务器,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-05-16

docker搭建es集群实现过程详解

这篇文章主要为大家介绍了docker搭建es集群实现过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-31

Ubuntu12.04建立内核树实现过程详解

先查看自己使用的内核版本lin@lin-virtual-machine:~$ uname -r 3.2.0-23-generic如果安装系统时,自动安装了源码。在 /usr/src 目录下有对应的使用的版本目录。lin@lin-virtua
2022-06-04

elementUI自定义上传文件功能实现(前端后端超详细过程)

自定义上传思路很简单,下面这篇文章主要给大家介绍了关于elementUI自定义上传文件功能实现(前端后端超详细过程)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-16

前端使用axios实现下载文件功能的详细过程

项目中经常会遇到需要导出列表内容,或者下载文件之类的需求,下面这篇文章主要给大家介绍了关于前端使用axios实现下载文件功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-13

前端可视化搭建组件值与联动实现详解

这篇文章主要为大家介绍了前端可视化搭建组件值与联动实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-05-19

Python基于win32com客户端实现Excel操作的详细过程

这篇文章主要介绍了Python基于win32com客户端实现Excel操作的详细过程,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-05-18

Go创建Grpc链接池实现过程详解

这篇文章主要为大家介绍了Go创建Grpc链接池实现过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-03-03

基于Android实现百度地图定位过程详解

一、问题描述 LBS位置服务是android应用中重要的功能,应用越来越广泛,下面我们逐步学习和实现lbs相关的应用如定位、地图、导航等,首先我们看如何基于百度地图实现定位功能 二、配置环境 1、注册密钥:地址http://develope
2022-06-06

JavagRPC拦截器简单实现分布式日志链路追踪器过程详解

有请求的发送、处理,当然就会有拦截器的需求,例如在服务端通过拦截器统一进行请求认证等操作,这些就需要拦截器来完成,今天松哥先和小伙伴们来聊一聊gRPC中拦截器的基本用法,后面我再整一篇文章和小伙伴们做一个基于拦截器实现的JWT认证的gRPC
2023-03-01

编程热搜

目录