之前在使用一些开源项目时,经常会看到在控制台输出项目大大的 LOGO。例如:

  • hexo minos 主题启动时在控制台里会显示「MINOS」文案
  • fis3 启动时也会有显示「FIS」

添加这种大号「艺术字」可以达到「品牌露出」的效果,当然,也是程序员特有「情趣」的体现。 😄

但它们的实现方式无外乎把编排好的 Logo 通过 console.log 输出。这种方式问题在于它几乎没有任何复用能力,而且一些需要转义的情况还会导致字符串的可维护性极差。因此,我花了一个周末的时候,实现了一个易用的、可复用的控制台「艺术字」lib。这样,下次有新的需求,只需要把正常的文本传给它,它就可以帮你自动编排与打印

阅读更多>>

近期,随着 vue3 的各种曝光,vite 的热度上升,与 vite 类似的 snowpack 的关注度也逐渐增加了。目前(2020.06.18)snowpack 在 Github 上已经有了将近 1w stars。

snowpack 的代码很轻量,本文会从实现原理的角度介绍 snowpack 的特点。同时,带大家一起看看,作为一个以原生 JavaScript 模块化为核心的年轻的构建工具,它是如何实现“老牌”构建工具所提供的那些特性的。

阅读更多>>

近期在做一个 DNS 服务器切换升级的演练中发现,我们在 NodeJS 中使用的 axios 以及默认的 dns.lookup 方法存在一些问题,会导致切换过程中的响应耗时从 ~80ms 上升至 ~3min,最终 nginx 层出现大量 502。

具体背景与分析参见《node中请求超时的一些坑》 ➡️

总结来说,NodeJS DNS 这块的“坑”可能有↓↓

  • 使用 http 模块发起请求,默认会使用 dns.lookup 来进行 DNS 查询,其底层调用了系统函数 getaddrinfogetaddrinfo 会同步阻塞,所以使用线程池来模拟异步,默认数量为 4。因此如果 DNS 查询时间过长且并发请求多,则会导致整体事件循环(Event Loop)出现延迟(阻塞)。
  • 如果使用 axios 来设置 timeout,在 0.19.0 之后实际会调用 Request#setTimeout 方法,该方法的超时时间不包括 DNS 查询。因此如果你将超时设为 3s,但是 DNS 查询由于 DNS 服务器未响应挂起了 5s(甚至更久),这种情况下你的请求是不会被超时释放的。随着请求的越来越多问题会被累积,造成雪崩。
  • getaddrinfo 使用 resolv.conf 中 nameserver 配置作为本地 DNS 服务器,可以配置多个作为主从。但其并没有完备的探活等自动切换机制。主下掉后,仍然会从第一个开始尝试,超时后切换下一个。即使使用 Round Robin,理论上仍会有 1/N 的请求第一个命中超时节点(N 为 nameserver 的数量)。

针对这种问题,在不去修改 NodeJS 底层(主要是 C/C++ 层)源码的情况下,在 JS 层引入 DNS 的缓存是一个轻量级的方案,会一定程度上规避这个问题(但也并不能完美解决)。因此,计划引入 lookup-dns-cache 作为优化方案。但更换 DNS 查询与引入缓存的影响面较广,线上引入前需要慎重确认以下问题:

阅读更多>>

去年接触了公司内一个开发运行了两年多的项目,整体应用是基于 React 技术栈的,多个单页应用有构成了多页应用。可以理解为比较独立的子业务之间是 MPA 形式跳转,而子业务内部则是 SPA 形式。

项目的构建使用了 webpack,发现存在较大问题:

  • 在生产环境上线编译大致需要 13 min+;
  • 本地开发环境下,代码改动后的热更新(增量编译)需要大概 10~20s 的时间,使得开发体验很差。

相信这些问题在很多上线迭代了很长时间的、使用了 webpack 的团队中都会遇到,所以把自己的优化实践经历写出来,和大家交流下。我在优化的时候也参考了许多网络上介绍的优化手段,当然,有些具有不错效果,有些可能对我们来说不适用。这并不是一篇罗列各种 webpack 优化技巧的文章,除了优化实践,还会有一些期间的反思。

阅读更多>>

今天的许多管理者“只见树木不见森林”,仅仅关注技术变革,而忽视决定生死的经济规律。如果你无法理解网络经济(network economy),那么如何能够理解信息时代(例如互联网)的商业运作模式呢?

阅读更多>>

这是一本非常真实的虚构小说,反应了今天 IT 部门几乎所有常见问题。。。

《凤凰项目:一个 IT 运维的传奇故事》虽然是一本和 DevOps 相关的“技术书”,但主体内容其实是使用小说的形式呈现的。

故事的主人公比尔原本只是一个中型机管理部的技术经理,但公司面临 IT 项目危机,他临危受命,出任 IT 运维副总裁。别以为这是个美差,对于他来说,走出舒适圈,在经验不足的同时,面临的是几近崩溃的 IT 状况 💢:

阅读更多>>

Use CommonJS modules directly in the browser with no build step and no web server.

以前我们要在浏览器中使用 CommonJS 都需要一堆编译工具和服务器,但本文要介绍一种方式,支持在浏览器直接打开本地 HTML 源文件中使用 CommonJS 加载模块。

阅读更多>>

今年好像特别流行实现 Promise/A+ 规范 😓 ,已经看到无数篇实现的文章了,那我也来凑个“晚热闹”吧,用 TypeScript 也来实现一个符合 Promise/A+ 规范的库。

阅读更多>>

学习一个东西最好的办法就是重新创造一遍,React 也不例外。这个仓库里是我写的一个类 React 库,支持 JSX / 生命周期 / Ref / Context API 等一些常用特性,同时包含了 Stack 与 Fiber 两种 Reconciler。当然,其中有很多简化,很多低性能的地方,甚至会有 Bug。但是作为学习资料,还是具有一定价值的。

阅读更多>>

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×