博客静态资源加速

🍕起因

在搭建属于自己的博客时，发现一个很严重的问题，使用的 jsdeiver CDN 由于访问不到在控制台报错。由于当时不太明白到底发生了什么，陷入了恐慌；遂决定在主题butterfly源码中查看到底是在哪个地方引用了这些文件，功夫不负有心人，最终发现是在

1	[BlogRoot]/themes/Butterfly/source/scripts/events/config.js

找到了相关声明，当然只是找到也是没多大用处的，怎么改，改为什么成了我现在面临的难题；

于是乎，我用了一个捷径，直接查看同类Butterfly类型的博客，直接f12在「network」一栏查看请求的同名文件地址，然后迅速ctrl + c ， ctrl + v换到文件中对应声明的地方，然后控制台不报错了；

再仔细观察请求的地址，前缀都不太一样，但是npm.elemecdn.com最多，于是又跟着将其他请求不到资源的地址全部换为此前缀，最终效果博客正常加载，但是加载速度很慢，f12查看「network」一栏发现主要是文字资源和图片龟速下载，于是乎准备冻手；在查看多篇文章后，决定写一写，以便不时之需，看完这篇文章，你将了解到

什么是静态资源库
CDN，UNPKG
npm搭建

🚕CDN

全名：Content Delivery Network，即内容分发网络；
由麻省理工学院教授，Tim Berners-Lee博士带领研究生Danny C. Lewin和其他几位顶级研究人员开发的利用数学运算法则来处理内容的一种动态路由算法技术；
解决：互联网爆炸式发展，用户越来越多，源服务器承受巨大压力，无法及时响应用户请求；
原理：建立一个缓存服务器，将内容缓存到终端用户附近，可存放各种类型的资源，如：html、css、js、视频、图片

详情请看原文：到底什么是CDN

📦NPM

全名：Node Package Manager，是 Node.js 官方默认程序包管理器
一个巨大的远程存储库，通过命令行方式可对库中文件进行操作
主体：
- package：含有 package.json 文件并发布到 npm 仓库的文件或文件夹
- module：在 node_modules文件夹中能被 Node.js 的 require方法加载到的任何文件或文件夹
- 含有 package.json 文件的 module 一定是 package

Package

主要属性：

Scope：作用域、范围，用于指定发布的包的命名空间，防止与他人的包名冲突
Accessibility：private 或者 public，与 github 类似

发布包

前提：

已安装 Node.js
一个 npm 帐号，注册地址：npm官网

此处只讨论如何发布 unscope 包，发布 scope 包默认是 private 且收费的，鉴于仅用于做资源加速使用，故不做大量篇幅介绍其他方式

发布：

在本地新建一个文件夹，用于存放需要加速的文件，如：js、css、image
进入该文件夹中，然后输入npm login或者npm adduser登录
1
npm login //npm adduser
如果已经切换 npm 为淘宝镜像源，需要把切换为原本的镜像源，否则无法登录

npm config set registry https://www.npmjs.org
初始化本地仓库
1
npm init
发布的包名不能与他人发布的包名重复，不然会发布失败
在文件夹中添加需要上传的文件，使用以下命令上传
1
npm publish
发布的板本为 1.0.0，发布成功后即可在 npm 官网登录帐号查看或者
1
2
https://npm.elemecdn.com/<pkg>@version/
https://npm.elemecdn.com/<pkg>/
- 默认不带板本号查看的板本是 1.0.0，但下载或使用的是最新板本
- 可以直接使用 url 的方式使用仓库内文件，且速度很快，意为着可以实现资源访问加速
- 板本更新24小时内允许删除

迭代：

如果添加、修改、删除仓库文件后要发布，需要修改 package.json 内的版本号（递增）再发布即可，每次更新独立，即以前版本的文件依然还在

废弃

1	npm deprecate <pkg>@version 'message' --force

被废弃的包代表此包已不再维护，但是包内文件依然可以使用和安装

删除

1 2	npm unpublish <pkg>@version --force npm unpublish <pkg> --force

删除库包之后，24小时之内 无法再次上传同名的库包到 npm，需要更改包名，或者等过了 24小时之后 再上传

参考：