452 字
2 分钟

利用NPM和CDN加速静态文件

2025-07-12
浏览量 加载中...

最近在折腾博客速度优化,发现浏览器控制台里总有几个文件加载得特别慢——尤其是那些体积不小的字体文件😔。想起来之前看过安知鱼大佬关于 npm 图床的文章,思路很赞。于是琢磨着不如把文件丢到 npm 上托管,再用个靠谱的 CDN 镜像加速引入,这不就快起来了?

PixPin_2025-07-08_15-36-12

实践下来效果不错,操作也不复杂,记录下步骤供参考:

操作步骤#

  1. 注册npm账号

    npm注册页

  2. 切换回原生源

    npm config set registry https://registry.npmjs.org
  3. 在电脑终端里登录npm

    # 仅第一次使用需要添加用户,之后会提示你输入你的npm账号密码以及注册邮箱
    npm adduser
    # 非第一次使用直接登录即可,之后会提示你输入你的npm账号密码以及注册邮箱
    npm login

    ​ 按 CTRL + 单击 在浏览器中打开登录页面,登录即可

  4. 把你想托管的文件(比如字体、图片)放进一个文件夹,在这个文件夹里打开终端,执行初始化命令:

    npm init

    命令行会问你包名、版本号等信息,一路敲回车用默认值也完全 OK。

  5. 然后输入发布指令,我们就可以把包发布到 npm 上了。

    npm publish

    ​ 在npm官网中也能看到我们发布的文件

加速镜像#

文件在 npm 上了,怎么高速引入你的博客呢?试试这些公共 CDN 镜像服务吧!直接把下面链接里的占位符换成你的包信息就行:

#JSDMirror 全球cdn 速度快
https://cdn.jsdmirror.com/npm/npm/:package@:version/:file
#elemecdn 更新慢,部分包缺少
https://npm.elemecdn.com/:package@:version/:file
#Staticfile(七牛云) 同步cdnjs
https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!

赞助
利用NPM和CDN加速静态文件
https://blog.liang.one/posts/6/
作者
Liang
发布于
2025-07-12
许可协议
CC BY-NC-SA 4.0
最后更新于 2025-07-12,距今已过 213 天

部分内容可能已过时

评论区

Profile Image of the Author
Liang
数码科技爱好者
分类
标签
站点统计
文章
9
分类
3
标签
11
总字数
6,845
运行时长
0
最后活动
0 天前

目录