近期，随着 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 查询，其底层调用了系统函数 getaddrinfo。getaddrinfo 会同步阻塞，所以使用线程池来模拟异步，默认数量为 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。但是作为学习资料，还是具有一定价值的。

阅读更多>>

性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的加载速度、交互流畅度等性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据，甚至是业务收入。

虽然大家对性能优化都有自己的思路，不过大多是分散在某几个点，较难形成一个完整的体系。业界也有很多优质的资料，但是性能优化作为一个系统性工程，大家想要系统性地去学习并不容易。所以在这次的「性能优化之旅」会通过与 Web 应用的访问流程相结合，帮助大家 全面理解与掌握 前端的性能优化。

如果准备好了，咱们就可以出发了 🔜

阅读更多>>