前言
随着 web 2.0 时代的到来，网站中使用的图片、样式、脚本等资源越来越多，对于网站的加载速度有着直接的影响。为了解决这个问题，CDN（Content Delivery Network 内容分发网络）应运而生。而本文要介绍的 npm 包 @dadi/cdn 则是一个基于 CDN 的资源管理工具。
什么是 @dadi/cdn
@dadi/cdn 是一个 Node.js 模块，它可以将网站中使用的资源（图片、字体、样式、脚本等）上传至云存储，并将这些资源在网站中使用 CDN 加速加载。它支持多种云存储服务商，如 Amazon S3、Google Cloud Storage、阿里云 OSS 等。
@dadi/cdn 采用了文件哈希值的方式来管理资源版本，这意味着当你修改了网站中某个资源的内容时，它会自动生成一个新的哈希值，并将这个新的哈希值作为该资源的新版本，这样在使用这个资源的网页中，就会加载最新版本的资源，而不是缓存中的旧版本。
如何使用 @dadi/cdn
在使用 @dadi/cdn 之前，你需要先在云存储服务商的网站上注册账号，创建项目，并获取访问密钥。以阿里云 OSS 为例，你需要前往阿里云 OSS 的控制台，创建一个 Bucket（相当于文件夹），并为这个 Bucket 创建一个 Access Key（相当于用户名）和一个 Secret Key（相当于密码）。然后，在 Node.js 中安装 @dadi/cdn 模块，并在项目中创建一个配置文件。
安装 @dadi/cdn
npm install @dadi/cdn --save-dev
创建配置文件
创建一个 cdn.json 文件，并写入以下内容：
-- -------------------- ---- -------
-
----------- -------------
-------------- --- ------ -----
------------------ --- ------ -----
--------- --- ------ ----
--------- ------------------
--------- -------
--------- -
-
------- --------------------------------------------------------
---------- ----------
-
-
-其中：
"provider"：云存储服务商的名称，如果使用阿里云 OSS，请设置为"aliyun-oss"；"accessKeyId"：访问密钥的 Access Key；"secretAccessKey"：访问密钥的 Secret Key；"bucket"：Bucket 的名称；"region"：Bucket 所在的地域；"prefix"：上传的文件在 Bucket 中的前缀，可以为空；"assets"：要上传的资源的配置。
在这个配置文件中，我们只配置了一个 "assets"。其中 "path" 是要上传的资源的路径，这里我们选择上传所有在 dist 目录下以 .js、.css、.jpg、.png、.gif、.svg、.eot、.ttf、.woff、.woff2 结尾的文件，但排除所有以 .map 结尾的文件，这是因为 .map 文件是用于调试的，不需要上传到 CDN 中。
如果要上传更多的资源，在 "assets" 数组中添加更多的对象即可。
使用 @dadi/cdn
在 package.json 文件的 "scripts" 字段中，添加以下命令：
{
"scripts": {
"upload": "cdn upload"
}
}然后，使用以下命令上传资源：
npm run upload
这个命令将执行 cdn upload 命令。在执行该命令前，请确保先在配置文件所在目录执行 npm init 命令，并正确填写项目信息。
执行完上述命令后，你就会发现你的资源已经上传到云存储中，并且在 CDN 上加速加载了。
总结
@dadi/cdn 是一个非常方便、易用的资源管理工具。它不仅可以为网站提供快速的资源加载，而且还可以为开发者提供便捷的资源管理方式。希望这篇文章可以为你的前端开发工作提供一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/140453