技术期刊 · 吾令凤鸟飞腾兮 | 使用 esbuild 加速 webpack;网易云的熟人社交玩法……

蒲公英 · JELLY技术期刊 Vol.44

生命不息，学习无止，这是很多人一以贯之的追求，虽然在很多领域中，知识是无法穷尽的，但每一点细小的改变都能让自己可以更进一步，就好像离骚中所述，“吾令凤鸟飞腾兮，继之以日夜”，每一次振翅都能飞得更高些。

观海志

登山则情满于山，观海则意溢于海

使用 esbuild 加速 webpack

梗概：esbuild 是使用 go 编写的打包工具，和 Webpack、Rollup 等常用打包工具对比，在速度方面拥有绝对优势。esbuild-loader 可以用于在 Webpack 中使用 esbuild 去编译 JS、TS；压缩脚本、样式等，让我们有机会同时拥有 Webpack 的生态和 esbuild 的编译速度。具体有多快？看看社区怎么说。

推荐语：esbuild 推出已有一定时间，大家惊叹于它的速度的同时，可能受到历史原因的影响，没有办法在工作中真正运用起来。利用 esbuild-loader，我们在 Webpack 项目中也可以体验 esbuild 带来的编译速度优化。尤其在 dev 环境，我们对编译结果和体积要求不高的情况下，使用 esbuil-loader 能大大提升编译效率。

网易云的熟人社交玩法

梗概：前段时间，网易云音乐上线了一个基于熟人社交投票玩法的 h5 活动，该活动依据投票数权重值来划分格子块，并通过格子块之间无缝挤压动效极大地增加了趣味性。本文将着重介绍如何基于 treemap（矩形树图）来实现一个稳定的动态格子块挤压效果以及在这其中遇到的一些问题。

推荐语：该案例是算法在前端业务中落地的典型场景，从需求分析，到算法选型，再到性能优化，最后进一步追求「完美」的用户体验，都验证了作者小结的一句话「它值得琢磨，有点东西，少年感永不过期」。

状态管理利器 XState

梗概：XState 基于有限状态机，是一个专业的状态管理的库。\
对比传统状态管理，XState 解决了可能存在的一些问题，例如：混淆了状态和数据、状态转移不够严谨、缺乏概念化难以表述等。\
XState 对开发友好。它的状态图的可视化工具，能让人对状态机的整体一目了然。此外，它也提供了优秀的生态支持，集成了 React、Vue、Svelte、不可变数据 Immer 等。

推荐语：在开发设计时，经常需要考虑如何维护逻辑状态和业务流程等，复杂的状态会导致维护成本剧增。\
状态机有着清晰的状态和状态转移定义，辅以层级、并发、数据等拓展元素，可以非常有效地管理状态。\
XState 围绕状态机相关的 SCXML 规范和 Statecharts 理念实现，其中的概念和设计也十分值得学习。

TypeScript 是如何工作的

梗概：TypeScript 是一门基于 JavaScript 拓展的语言，它是 JavaScript 的超集，并且给 JavaScript 添加了静态类型检查系统。本文就来探讨简单探讨一下 TypeScript 是如何工作的，以及有哪些工具帮助它实现了这个目标。

推荐语：目前大多数项目都已经使用 TS 进行开发，稍微深入了解 TypeScript 的工作原理，及相关插件工具，更有利于 TS 在项目开发中发挥最大作用

流觞亭

因山卜地心机巧，望水如天眼力穷

深入浅出 V8 引擎

梗概：V8 引擎就是一个使用 C++ 编写的高性能 JavaScript 和 WebAssembly 引擎，主要作用于 Chrome 浏览器 和 NodeJS ，能够完成 编译/执行 JS 代码，管理内存，负责垃圾回收，与宿主语言的交流等工作。

推荐语：每一个前端同学应该都对 V8 引擎不陌生，我们每天的工作都和 V8 引擎相关，如果我们可以更加熟悉内部的原理，那会给我们的日常工作带来极大的助力。

「蒲公英」期刊，每周更新，我们专注于挖掘「基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能、设计哲学、前端框架」等多个大方向的业界热点，并加以专业的解读；不仅如此，我们还会推介精选凹凸技术文章，向大家呈现团队内的研究技术方向。

抬头仰望，蒲公英的种子会生根发芽，如夏花绚烂；格物致知，我们登高远眺、沧海拾遗，以求积硅步而至千里。

蒲公英 · JELLY技术期刊贡献指南