npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zckevin/librecdn-js

v0.1.9

Published

[freecdn](https://github.com/EtherDream/freecdn) 前端脚本。

Downloads

18

Readme

简介

freecdn 前端脚本。

结构

  • core-lib:核心库(可脱离 Service Worker 运行,方便开发和测试)

  • main-js:主程序(静态链接 core-lib)

  • loader-js:加载器(体积极小,动态加载 main-js)

  • fail-js:异常处理

特性

体积

loader-js 仅保留 Service Worker 基本功能,压缩后只有几百字节,从而能更快加载,尽早开启请求拦截。

完整功能放在 main-js,该脚本默认从公共 CDN 加载,最大程度节省当前站点流量。

安全

loader-js 加载 main-js 时会校验其 Hash 值,如果和预期不一致则拒绝执行,避免 CDN 风险。

Hash 值是硬编码在 loader-js 中的,因此不存在热更新的现象。即使脚本有升级,开发者必须主动更新才会生效。

稳定

为了避免公共 CDN 不稳定因素,loader-js 同时从多个 CDN 加载 main-js,哪个先完成运行哪个,用流量换时间。如果 CDN 都不可用,则从当前站点加载 main-js。

这些额外的流量也不是完全浪费。因为提前和多个 CDN 进行预热,之后访问会更快。并且这几个文件的加载时间,还会用于各个 CDN 的性能评估。

兼容

loader-js 生成 ES3 语法,可兼容所有浏览器。运行时会检测浏览器是否支持 ES2020,支持则加载 main-js,否则加载 fail-js,做一些不支持的处理。

如果 CSP 策略导致 Service Worker 无法执行 eval,loader-js 也会加载 fail-js。(页面存在 CSP 无影响)

复用

loader-js 既能在页面中运行,也能在 Service Worker 中运行。在控制台网络栏中可见该脚本会出现两次。

安装过程

如果 Service Worker 安装成功,页面会立即刷新;如果浏览器不支持或安装超时,页面会加载 fail-js 进一步处理异常情况。

Service Worker 安装后,页面加载 loader-js 得到的不再是原先内容,而是被拦截替换成 freecdn 页面层的功能代码。该模块目前未开发,之后会用于 WebRTC 等 Service Worker 无法实现的功能。

使用

实际使用时通过工具生成前端脚本:

freecdn js --make

因为 loader-js 包含公钥信息,所以文件内容是不固定的。通过工具生成可自动写入公钥。

调试

为本项目创建全局链接:

npm link

进入 freecdn 项目,使用本地 freecdn-js 包代替远程版本:

npm link freecdn-js

同时 freecdn 项目也可通过 npm link 创建全局链接,之后执行 freecdn 命令时直接使用本地版本。

编译

本项目所有模块都使用 TypeScript 开发。执行:

npm run dev

之后源文件有变化时会自动编译相应的模块,生成的 JS 位于 dist 目录。

配合调试的站点,使用开发模式创建前端文件:

freecdn js --make --dev

开发模式有如下特征:

  • 前端文件创建在 freecdn-internal/dev 目录,而不是 freecdn-internal/$VER 目录

  • freecdn-internal/dev 中的文件使用 link 的方式和本项目 dist 中的文件保持同步

  • 前端脚本不会加载外部站点的资源,总是从当前站点 freecdn-internal/dev 加载

  • 前端脚本使用未压缩的版本,方便调试

  • 前端源码中 IS_DEBUG 条件变量为 true

压缩

npm run build

本项目使用 terser 对 JS 进行压缩,生成相应的 .min.js 文件。