Skip to main content

CDN

cdnimportgithubcjs -> esm
Skypackhttps://cdn.skypack.dev/
esm.shhttps://esm.sh/esm-dev/esm.sh
jsDelivrhttps://cdn.jsdelivr.net/npm/
JSPMhttps://ga.jspm.io/npm:[email protected]/jspm/project
unpkghttps://unpkg.com/${PKG}?modulemjackson/unpkg

CDN Test

for i in $(seq 3); do

rm bench-*.txt
for i in $(seq 10); do
curl -o /dev/null -s -w "%{time_total}\n" https://cdn.skypack.dev/react@17 >> bench-a.txt
curl -o /dev/null -s -w "%{time_total}\n" https://cdn.jsdelivr.net/npm/react@17/+esm >> bench-b.txt
curl -o /dev/null -s -w "%{time_total}\n" https://esm.sh/react@17 >> bench-c.txt
done
for i in bench-*.txt; do
echo $i
awk '{ total += $1; count++ } END { print total/count }' $i
done

done

esm.sh

  • 可以 Selfhosted
  • 主服务器在 HK
  • 基于 esbuild 构建
  • cjs -> esm 使用 swc
  • 支持 X-Typescript-Types 头 - demo 类型检测
    • ?no-check 禁用
import React from 'https://esm.sh/react@17';
// 非模块文件
import 'https://esm.sh/tailwindcss/dist/tailwind.min.css';
// bundle 模式
import {Button} from 'https://esm.sh/antd?bundle';
// 开发模式
import React from 'https://esm.sh/react?dev';
// 依赖控制
import React from 'https://esm.sh/[email protected]';
import useSWR from 'https://esm.sh/[email protected]';
// 别名
import useSWR from 'https://esm.sh/swr?alias=react:preact/[email protected]';
// 目标版本 - 默认基于 header 判断
import React from 'https://esm.sh/react?target=es2020';
// WebWorker
import editorWorker from '/monaco-editor/esm/vs/editor/editor.worker?worker';
const worker = new editorWorker();

FAQ

jsdelivr vs. unpkg