文章图片存储在GitHub,网速不佳的朋友,请看《CDN 使用心得:加速双刃剑》 或者 来我的技术小站 godbmw.com

本文以腾讯云平台的 CDN 服务为例,记录下在个人网站开发和公司项目实战中的对 CDN 使用的心得:便宜没好货。

1. 什么是 CDN?

CDN 的全称是 Content Delivery Network,即内容分发网络。其目的是通过在现有的 Internet 中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。

可以简单理解成:CDN 就是一个能让用户以最快速度访问到相应资源的网盘。

2. 如何访问 CDN 资源?

在云平台的控制台开启“对象存储”服务后,开启对应的“加速域名”,此时,针对这个存储桶,就开启了 CDN 加速。

如下图所示,“加速域名”就是 CDN 域名。

在存储桶下可以进行各种文件操作,比如我将友链的图片都放在了/friend文件夹下面:

此时,birdteam.png的 URL 是:https://blog-1255463368.cos.ap-guangzhou.myqcloud.com/friend/birdteam.png;CDN 对应的 URL:https://blog-1255463368.file.myqcloud.com/friend/birdteam.png任何资源都可以用文件路径拼接的方式来获得 URL,进而获得资源

3. 如何在 SPA 应用中使用 CDN?

时下火热的vuejs,reactjs等 SPA 框架以及衍生出来的脚手架,均有利用webpack进行打包操作。最无脑的操作就是将打包后的文件直接扔到服务器上。

然后,用户访问网站的时候,从服务器拉取资源,速度慢到另人发指。除此之外,还得考虑做后端缓存,更是出力不讨好:)

但是,借助 CDN 可以极大缩小用户等待时间,提高访问体验。同时,云平台 CDN 还自带前端缓存,简单方便。

vue-cli搭建的vuejs应用中,可以通过修改/config/index.js中的配置来更改打包后index.html文件中资源的地址。如下图所示,更改build.assetsSubDirectory为存储桶的文件名称,更改 build.assetsPublicPath为 CDN 的域名:

命令行执行npm run build后,打包后的项目文件都放在了/dist/文件下。根据前面的配置,将/dist/static/文件夹直接上传到云平台的对应存储桶的跟目录下即可。

查看网站godbmw.com的源码,可以看到资源都是从 CDN 上获取了。

4. 不要乱用第三方 CDN

在搭建博客之初,因为想节省一些 CDN 资源,所以,一些第三方 JS 库并没有利用npm来进行管理,而是通过第三方 CDN 来引入的。比如博客下方的播放组件Aplayer,评论系统Valine等等。

这样做的好处就是打包体积小了很多(从800+kb降低到了500+kb)。本来以为可以提高用户访问速度,但事实是:免费的 CDN 是不稳定的。ValineCDN 资源的获取,有时候会阻塞 3s,在网络不稳定的移动端,浏览体验非常差。

除了速度不稳定,不通过npm管理的项目难以维护。隔了 2 个月,就忘记用了什么库,只能通过翻代码和查看<script>标签中 CDN 的资源地址来确定。

因此,尽量在项目中使用npm安装第三方库,而不是通过第三方平台的 CDN 服务加载对应的库代码。

5. 写在最后

CDN 的理解和应用都非常简单,没什么深度,只是经验之谈(所以文章结构有点散,请谅解)。

目前,各大平台的 CDN 免费额度对于个人项目甚至是小型商业项目是够用的。例如我的博客打包后才800+kb,而免费额度是10G/月,如果能用光免费额度,那么也说明网站可以盈利了。此时,更应该使用 CDN 来提速。这是一个良性循环。

CDN使用心得:加速双刃剑的更多相关文章

  1. Google 工程师:为什么 CDN 对移动客户端加速“没有”效果

    王者荣耀是近两年来比较火的手游,不少小伙伴都有玩过.玩这个游戏最怕的不是遇到猪一般的队友,也不是怕遇到神一样的对手.最让我们感到害怕和绝望的是,团战爆发时,而你 460 了.460 是一个玩家常用的词 ...

  2. CDN对于动态加速是否有效

    CDN对于动态加速是否有效的问题.关于这个问题,一直存在一些分歧,部分人认为有效,部分人认为无效,主要是CDN技术也在更新,而且是比较低调的进行着更新,所以并不是所有人都清楚CDN对动态加速的效果.其 ...

  3. CDN存储和加速静态文件是什么回事(整理)(CDN是什么)

    CDN存储和加速静态文件是什么回事(整理)(CDN是什么) 一.总结 一句话总结: 内容分发网络:Content Delivery Network:依靠网络中的各个节点,就近发放静态资源. CDN的全 ...

  4. CDN HTTPS安全加速基本概念、解决方案及优化实践

    大家都知道,HTTP 本身是明文传输的,没有经过任何安全处理,网站HTTPS解决方案通过在HTTP协议之上引入证书服务,完美解决网站的安全问题.本文将为大家介绍阿里云CDN HTTPS安全加速传输的基 ...

  5. AWS CloudFront CDN直接全站加速折腾记The request could not be satisfied. Bad request

    ERROR The request could not be satisfied. Bad request. Generated by cloudfront (CloudFront) Request ...

  6. 国内网站常用的一些 CDN 公共库加速服务

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...

  7. 盘点国内网站常用的一些 CDN 公共库加速服务

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...

  8. Azure CDN:氮气加速已开启,司机们请做好准备

    在上一周,我们向各位小伙伴介绍了通过 Azure CDN 高级版服务为 HTTPS 应用加速的做法,漏掉的小伙伴可以点击这里穿越回去补课哦.那我们今天讲点什么呢?当然是 CDN 最重要的价值:改善应用 ...

  9. 盘点国内网站常用的一些 CDN 公共库加速服务(转载)

    百度CND jQuery 地址:<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></scri ...

随机推荐

  1. HDU 1171 01背包

    http://acm.hdu.edu.cn/showproblem.php?pid=1171 基础的01背包,求出总值sum,背包体积即为sum/2 #include<stdio.h> # ...

  2. kubernetes中filebeat以sidecar方式和应用一起部署,并且传入环境变量

    本文的环境介绍 [root@m-30-1 ~]# kubectl version Client Version: version.Info{Major:"1", Minor:&qu ...

  3. php SQL 防注入的一些经验

    产生原因 一方面自己没这方面的意识,有些数据没有经过严格的验证,然后直接拼接 SQL 去查询.导致漏洞产生,比如: $id = $_GET['id']; $sql = "SELECT nam ...

  4. UITableView自动计算cell高度并缓存

    原文链接:http://www.jianshu.com/p/64f0e1557562 cell高度计算的历史 在iOS8之前,如果UITableViewCell的高度是动态的,如果想要显示正确的话,我 ...

  5. 使用Phabricator进行代码审查

    Pharicator 是FB的代码审查工具,主要开发者为Evan Priestley,是一个开源软件,可在Apache许可证第2版下作为自由软件分发.详细信息可查看官方文档.这里从应用的角度,一步一步 ...

  6. 前置知识: FactoryBean的作用

    FactoryBean 简介 FactoryBean是Spring中一种特殊的Bean,是用于创建Bean对象的,最大的作用便是可以让我们自定义Bean的创建过程.如果你在XML配置文件配置了一个节点 ...

  7. i==1 && resolve()

    for( var i=100000 ; i>0 ; i-- ){ i==1 && resolve() } var dd = 988889;console.log(`${dd}`) ...

  8. Qt之使用CQU库快速开发统一风格界面

    在使用Qt开发时,肯定是想让开发的项目界面统一风格:不希望每个界面都要程序员用代码去修饰美化以及进行事件处理等等,这样非常繁琐,容易出错而且没有格调:所以我就开发一个动态链接库,封装统一的风格界面.事 ...

  9. MySQL的时间、日期型

    MySQL的时间.日期型 MySQL中表示时间值的有DATE.时间类型为DATETIME.DATE.TIMESTAMP.TIME和YEAR.每个时间类型有一个有效值范围和一个"零" ...

  10. python修改文件中字符串并写入

    python实际工作中,做一些小工具,很方便.最近在做一个格式转换工具时候,用到了替换文件中特定字符串的 功能.当初没直接想出来,就在网上查了一下,做个记录,方便后续使用. # -*- coding: ...