前端都要会的性能加速篇（CDN加速）

1. CDN供应商端设置（以七牛云为例）

在七牛云中新建一个对象存储空间

然后在存储空间中绑定一个你备案的域名，比如我这里绑定的就是 cdn.linwene.cn ,注意先别急着在域名解析中添加该记录

添加后在融合cdn的域名管理里面点击复制CNAME，然后在你域名解析里面添加记录（去你的域名供应商平台设置，我的是腾讯云），主机记录参考你上一步绑定的域名，比如我上一步是 cdn.linwene.cn，主机记录就是 cdn

然后在存储空间中的内容管理设置默认域名为你刚刚绑定的域名

2. 代码修改（这里以Webpack为例，不是的可以举一反三）

更改webpack打包输出路径publicPath为你所设置的CDN服务器域名

const CDN = {
    assetsSubDirectory: 'static',
    assetsPublicPath: '//cdn.linwene.cn/cdn_test/'
}
复制代码

存储空间回源设置（在存储空间的镜像存储里面）

打包上传服务器后访问你的要加速的对应网站

七牛存储空间结果

线上打包构建完删除指定前缀文件(目的是为了删除旧文件)

记得先安装七牛的npm包npm install qiniu

var qiniu = require("qiniu");

var accessKey = 'accessKey';  //开发者平台上面提供的accessKey
var secretKey = 'secretKey'; //开发者平台上面提供的secretKey

var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var config = new qiniu.conf.Config();
//config.useHttpsDomain = true;
config.zone = qiniu.zone.Zone_z2;//z2是华南区
var bucketManager = new qiniu.rs.BucketManager(mac, config);

// 获取指定前缀文件
bucket = 'lwe_blog'; //bucket为存储空间名字
var options = {
  prefix: 'cdn_test/',//这里指定的前缀就是cdn_test/
};

bucketManager.listPrefix(bucket, options, function(err, respBody, respInfo) {
  if (err) {
    console.log(err);
    throw err;
  }
  if (respInfo.statusCode == 200) {
    var nextMarker = respBody.marker;
    var commonPrefixes = respBody.commonPrefixes;
    var items = respBody.items;
    items.forEach(function(item) {
        // 删除对应文件
        bucketManager.delete(bucket, item.key, function(err, respBody, respInfo) {
          if (err) {
            console.log(err);
            //throw err;
          } else {
            console.log(`${item.key}删除成功`);
          }
        });
    });
  } else {
    console.log(respInfo.statusCode);
    console.log(respBody);
  }
});
复制代码

删除后刷新下cdn缓存（如果除index.html外的文件都有hash值就少了这一步骤）

也可以在上面的代码中加上刷新缓存的语句，具体可以查看七牛的开发者文档

之后后用户访问就会自动回源最新文件了

其他CDN供应商类似，这里就不多说

转载于:https://juejin.im/post/5d1c1080f265da1b934e1d5c