转载

使用 jsDelivr 来优化网站访问速度

最近 Blog 更新比较勤快，也多了很多新的访客和读者，其中不少和我反应网站从国内访问比较慢。我就想着要去优化一下以照顾国内的读者们访问体验，于是就有了这篇文章。

首先感谢 @lepture 的友情指导，在他的指导下，我的 Blog 在国内网络的访问速度，从原本可能要 2.5 秒，变成只要 0.8 秒左右，几乎是原来的 1/3。可以说有了巨幅提升。而这一切仅仅是在一个非常简单的优化下达成的，也没有花一分钱。下面我就简单的介绍一下这个过程。

优化原理

想要提升网站的访问速度，基本上切入点无非是优化前后端的访问性能。第一步肯定是 Profile，通过各种方法，看看速度的瓶颈在哪里。关于后端性能的 Profile，可以看我这篇《为 Nginx 启用带请求消耗时间的 access log 》。

我的 Blog 架构比较简单，问题不出在后端，通过 Chrome 的 Developer Tools 的 Network 可以评测得出，还是出在网络访问性能上：这个 1KB 的 JS 文件和 193 KB 的 CSS 文件，一共花了 1.5s 秒才载入成功。整体的载入性能（以 DOMContentLoaded 为准），也因此达到了 2.61 秒。见图：

使用 jsDelivr 来优化网站访问速度

这时优化思路就比较简单了，那就是上 CDN 来加速。这时可以考虑用 Cloudflare。不过小明告诉了我一个更合适的思路，那就是将 JS+CSS 资源做成 npm 包，然后通过免费的全球加速的 jsDelivr 服务来加速访问，整个过程也相对简单。于是我就采用了这种方式。

使用 npmjs + jsDelivr

我的网站是基于 Django 构建的，因此在工具流上面需要做不少的改进，才能完美的结合这套 npm + jsDelivr 的静态资源部署。在写这篇文章的时候，我目前还是手动部署，接下去我会优化流程再写一篇。于是现在的手动部署适合任何用到静态资源并需要加速访问的网站。

第零步：创建 npmjs 账号

由于我们要把网站静态资源作为 npm 包的形式放在 npmjs.org 网站上，于是首先需要注册一个账号。

第一步：建立并发布 imtx npm 包

创建一个目录，然后放一个名为 package.json 的文件，写简单的两行即可：

{
  "name": "imtx",
  "version": "1.0.0"
}

将 imtx.js 和 imtx.css 放置其中，然后执行 npm publish，即可发布一个名为 imtx 的 npm 包了。

第三步：使用 jsDelivr 来引用这个包

发布完这个 npm 包后，就可以在线使用它了，怎么用？很简单，在 HTML 模版里面，根据版本号引用在 jsDelivr 的地址：

https://cdn.jsdelivr.net/npm/imtx@1.0.0/imtx.js

和：

https://cdn.jsdelivr.net/npm/imtx@1.0.0/imtx.css

这样，你的网站的资源文件，就通过 jsDelivr 这个全球加速的 CDN 来访问了。

值得一提的是，如果你也是 Django 项目，那么有必要在 HTML 模版里通过判断是不是 debug （这个 debug 需要在 INTERNAL_IPS 去指定）环境来分别考虑本地加载还是从 jsDelivr 加载，这样就不会影响开发工作了。

{% if debug %}
    {% stylesheet "imtx" %}
 {% else %}
    <link href="https://cdn.jsdelivr.net/npm/imtx@1.0.0/imtx.css" rel="stylesheet" type="text/css" media="screen">
 {% endif %}