首页 Vue 学习告一段落 & Kindle2flomo 部署一些事
文章

Vue 学习告一段落 & Kindle2flomo 部署一些事

Vue 学习先告一段落,以选 UI 框架为始,以重构 Kindle2flomo 为终,初步具备写个前端小项目的水平,后面的学习,将会是查漏补缺,而不再是系统性的学习了。

时间耗得太长,一是担心失去了「好奇心」而倦怠;二是对主线进程边际效益递减,也没太必要。接下来,将启动下个节点的学习,以及开始下个支线项目。

这两周 side project 的进展主要如下:

重构 Kindle2flomo

第一周,累计编码时间在 10 个小时左右,几乎占用了工作中所有的摸鱼时间(包括午休),使用公司 14 寸的笔记本电脑写代码还是比较难受的,好在足够专注,总算将 Kindle2flomo 的代码重构完了,并且还加了一些小功能,能有这个收获,总体还是满意的。

具体可看下这篇文章:Kindle2flomo 最终版发布

第一周重构完,并没有上线,第二周大概又花了相同的时间,才将其部署到线上。为什么又花了一周时间?

因为当你完成任何项目的 90% 时,其余无数的细节将需要第二个 90% 来完成。

部署 Kindle2flomo

线上部署和本地开发,需要掌握的技能点,还是有比较大的差异的。即便是 Kindle2flomo 前端这样一个纯静态的站点。

刚部署到线上的时候,我就发现首次加载时间太慢了,大概得 5-6 秒时间,分析大概有如下几个原因:

  1. 打包后,一次性需要加载的资源太大
  2. 服务器配置不太行,为学习使用,买的丐版
  3. 没有启用 CDN 加速

打包资源过大,应该是其主要原因。刚开始的时候,打包后,js + css 文件加一块,将近 2M,首次打开的时候,这个是需要浏览器一次性下载的资源,碰到网络差点的环境,可能直接白屏卡住了。

后来,精简第三方模块(主要是 UI 库),将全局引用,变成按需引用,包的大小差不多减小了一半。

另外,续费服务器的时候,看到 CDN 促销,顺手买了一年的 CDN,才几块钱,这块内容对我来说,比较陌生,刚开始还忘了配 https,导致访问失败。

CDN 可以接管大量的相同区域的静态资源请求,除了这个,还有好多其他功能,例如:防盗链、访问控制等,后面有时间再研究。

经过这两步操作,首次加载基本控制在 2s 以内了,如果正好命中 CDN 缓存,那就是秒开。

这块暂时先这样了,后续有需要的时候,再具体研究,比起写代码,这块的配置还是相对要容易一些,基本上都是在云服务商控制台操作。


Kindle2flomo 并不是 side project 的主要内容,这次的重构任务也是为了学习 Vue3 而产生的支线。

做支线项目,完全是为了缓解学习过程中的枯燥,毕竟做点东西出来,要比纯粹的学习有意思多了。

本文由作者按照 CC BY 4.0 进行授权

打工人封控在家 | 周总结

居家办公,稀碎的时间 | 周总结