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

  • 2020-01-14
  • 0
  • 0

优化原理

想要提升网站的访问速度,基本上切入点无非是优化前后端的访问性能。第一步肯定是 Profile,通过各种方法,看看速度的瓶颈在哪里。

我的 Blog 架构比较简单,问题不出在后端,通过 Chrome 的 Developer Tools 的 Network 可以评测得出,还是出在网络访问性能上,前端加载的一些资源文件(JS、CSS 等)太耗时,加载时长要好几百 ms,部分甚至超过 1s。导致整体页面的载入性能(以 DOMContentLoaded 为准)较差。下图是 jquery.js 的加载耗时:

Alvin's Blog

这时我们优先想到的优化方法就是上 CDN 来加速,可以考虑用 Cloudflare。不过我现在介绍的不是产用静态服务器的方法,而是将 JS、CSS 等资源做成 npm 包,然后通过免费的全球加速的 jsDelivr 服务来加速访问,整个过程相对来说比较简单。

使用 npmjs + jsDelivr

通过 npm publish 将 js、css 等资源发布到 npmjs 上,然后通过再 npmjs 官网查到的响应的连接有进入资源:

https://cdn.jsdelivr.net/npm/alvinwp@2.0.0/jquery.min.js

发布项目到 npmjs 的详细步骤可查看 – 如何发布自己的 npm 包

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

经过 jsDelivr 加速后,资源的加载性能可以得到较大的提升:

Alvin's Blog

评论

还没有任何评论,你来说两句吧