Skypack: I've been laying out front-end infrastructure for a long time

Hello everyone, I'm Casson.

More and more front-end developers have given up webpack and switched to vite as a project packaging tool.

The main reason is vite in the development environment based on the ESM specification implementation Nobundle mode, saving the time of code packaging (of course, there are also ESBuild credit).

In the production environment, there is still a need for packaging.

With the iteration of browsers, ESM specification compatibility is getting better and better, and one day it will enter the state where the production environment is widely available .

At that time, the production environment packaging will no longer be just required.

On the other hand, from the perspective of the HTTP protocol, in the HTTP/1.1 era, multiple modules are packaged into one file, which can reduce the number of concurrent browser requests and achieve optimization purposes.

But after HTTP/2 multiplexing is common, it doesn't make much sense to do so.

It can be said that when these infrastructures are mature, the use of the ESM module in the production environment is a matter of course.

Many teams had a hunch about this, and began to lay out related products very early. Today's introduction Skypack is such a product.

Welcome to join the human high-quality front-end framework group , with flying

different CDN

Skypack was first released in June 2019 (formerly Pika CDN ), is a CDN service based on the ESM specification .

In the browser, the common CDN service is usually introduced in the form of the script tag UMD canonical code, for example: ReactDOM

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

After the code is executed, the object window.ReactDOM will be exposed globally.

In some cases, a package will also depend on other packages, such as ReactDOM will also depend on the following three packages:

• React
• scheduler
• object-assign

To deal with this situation, developers in production environments usually package third-party dependencies uniformly.

And Skypack introduces the code with the ESM specification:

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

The browser will in turn initiate a request for the package and its dependencies :

Combined with the Module Preload feature of the browser, these resources can be preloaded uniformly.

This solves the problem that third-party dependencies need to be packaged.

Polyfill on demand

If you visit the above CDN link ( https://cdn.skypack.dev/react-dom ), you will find that the returned result is not the code of ReactDOM , but the following two sentences export Statement:

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

Behind the statement is the ESM canonical ReactDOM code.

This is done because: Skypack will provide the browser with the appropriate package based on the target browser's UA .

在高版本Chrome中的polyfill ，而在低版本IE中的代码polyfill ，所以不同目标浏览The controller gets a different ReactDOM code.

The difference in the hash (oZ1BXZ5opQ1DbTh7nu9r) in the above export statement corresponds to the different results of the same version of ReactDOM after polyfilling to different degrees .

In addition, adding --- url after min can get the compressed code :

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

Next let's see how Skypack handles the request.

Process for handling requests

Not all packages have a product of the ESM specification ( React does not), when accessing any package in the following url format:

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

If the package has never been accessed before, the package and its dependent ESM artifacts are built and returned.

For example ReactDOM itself only provides the product of the UMD specification, and the first user to access his Skypack CDN link will go through the following steps:

• Collection ReactDOM and its dependencies
• ReactDOM and its dependencies to ESM specification
• Build different polyfill degree ESM product
• According to the target browser UA return the corresponding ReactDOM

As can be seen in the product code of ReactDOM , the three packages he depends on have been converted to ESM specification:

Summarize

In addition to Skypack , esm.sh is also a similar function ESM CDN service.

When the front-end infrastructure is mature, I believe that these services ESM CDN will definitely shine.