前端每周清单第49期：Webpack 4 Beta尝鲜，React Windowing与setState分析，Web Worker实战

作者：王下邀月熊 编辑：徐川

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• iOS 11.3与macOS 10.13.4即将包含Service Workers:本周，Safari Technology Preview 48版本发布，其引入了包括密码自动填充机制变更、启用Storage Access API等一系列特性。更值得一提的是，这也意味着iOS 11.3与macOS 10.13.4即将包含Service Workers，从而允许开发者利用后台脚本提供更强大的可离线使用的Web应用；此外，iOS 11.3还允许将Web Apps添加到屏幕桌面，并且支持Manifest文件，更多PWA相关资料参考这里。

• Parcel v1.5.0发布:虽然发布不久，但是Parcel已然在Github上获取了超17000的点赞，并且在npm上有超百万的下载量与数十位来自各地的贡献者。Parcel v1.5.0是发布以来的重量级更新，其引入了JavaScript Source Map，WebAssembly支持，Rust与WebAssembly转换的支持，配置文件缓存失效，.env文件等特性，并且进一步优化了小型项目的编译效率。

• Expo SDK v25.0.0发布:本周发布的Expo SDK v25.0.0基于最近的React Native 0.52版本，其带来了如下新特性：支持在独立应用中打包字体、视频与音频资源；优化发布通道，允许回滚更新，交叉发布，查看历史等；为AWS Cognito提供了开箱即用的支持。除此之外，该版本还优化了Calendar、MailComposer、GLView等一系列接口与扩展。

• Bootstrap 4:尽管等待了多年，但是Bootstrap 4最终还是发布了；正式版本与上一个Beta版本相比未有重大变化，主要着眼于部分错误修复与提升。本版本中优化了打印样式与工具类，添加了额外的边辅助函数，更新了 $spacers 与 $sizes 映射，并且修改了主题文档等。

开发教程

步步为营，掌握基础技能

• webpack 4 beta  尝鲜:本周，webpack 4.0.0-beta.0发布，本文即是对于Webpack 4的特性与使用进行简要介绍。Webpack 4为我们带来了如下特性：多场景下更好的性能提升，更好的默认配置，支持package.json中的sideEffects配置，更好的JSON Tree Shaking支持，更新到UglifyJS2，更多的类型支持，WebAssembly支持，取消CommonsChunkPlugin替换为默认优化配置。更多Webpack相关资料参考这里。

• 有趣的JavaScript Proxies用法: JavaScript中还有很多尚未广泛使用的新特性，JavaScript proxies可能就是其中之一，它能够在运行时复写或者拦截某个对象的属性以及方法。本文中，作者使用Proxy完成了几个有趣的小功能：仅有二十行代码的API SDK，以可读性更好的方式查询数据属性值，监控异步函数调用等。

• 一些有趣的ECMAScript 2017尚未接纳的提案:随着Polyfills与转换器的流行，很多还处于早期的提案在完成之前就在开发者之间获得了极大的欢迎，本文即是对ECMAScript 2017尚未接纳的提案中一些有趣的进行分享。作者首先讨论了ECMAScript提案的五个进程，然后讨论了Asynchronous Iteration, Class Improvements, Class Decorators, Import Function, Observables, Do Expression, Optional Chaining等特性。

工程实践

立足实践，提示实际水平

• 利用Windowing创建高效的React视图:本文是 bvaughn 讨论React性能、搜索与应用架构相关演讲上的Presentation，他着眼于到底是什么拖慢了React应用性能，并且分享了如何解决问题以及学到的经验。值得一提的是，他讨论了很多关于Windowing工作原理，以及如何仅创建那些用户可见数据的实践；更多React教程参阅 React与前端工程化实践。

• SPA技术选型时的考量:本文作者讨论了他在对于网页的技术选型中，是否应该采用SPA方案的考量，需要注意的是，本文带有了较多的主观态度，请批判性地看待。作者提出的考量点包括：速度与性能，高开发成本，不稳定性，不易长期维护，低安全性，重造轮子，社交媒介属性，低可访问性，对于内存的浪费等。更多Web架构相关资料参考这里。

• 基于IntersectionObserver进行资源延迟加载:本文中，我们将会讨论页面滚动交互里经常涉及到的资源懒加载，不仅仅是图片，而是基于IntersectionObserver的任何资源懒加载。本文也会讨论如何根据元素的可见性来判断是否触发某个函数，更多Web性能优化相关内容参考 Web开发基础与工程实践。

深度阅读

深度思考，升华开发智慧

• why is setState asynchronous?: MobX的作者，mweststrate，近日提了某个Issue讨论为何setState需要设置为异步。我们耳熟能详的原因是 异步的setState用于进行异步渲染，并且确保state对象是反馈了那些被渲染好的状态。而Gaearon也澄清了这个问题，异步的setState主要是为了保证内部一致性，并且为后续的并发更新打下基础。更多React教程参阅 React与前端工程化实践。

• JavaScript工作原理系列：Web Workers浅析与典型的使用场景:本文是How JavaScript Works系列文章的第七篇，主要讨论了Workers的类型，它们的特性与作用，以及它们在不同的场景下的优势与不足。众所周知的是，异步代码以及Event Loop机制能够帮助缓解JavaScript单线程的不足；而Web Worker则是能够创建轻量级的、浏览器内线程，从而运行那些并不会阻塞Event Loop的代码。Web Worker典型的使用场景包括了Ray tracing，数据加解密，数据预抓取，Progressive Web Apps以及拼写检查等等；更多Web Worker相关资料参考这里。

• Firefox 58: The Quantum Era Continues:对于Mozilla而言，2017年是个非常有意义里程碑，正式发布了Firefox Quantum，通过彻底重写的方式极大地提升与优化了Firefox的性能与使用体验。本文即是对于Firefox 58版本正式发布时，其带来的新特性进行解读：非主线程渲染、后台Tab限流、WebAssembly流式编译器、CSS字体呈现、新的Promise特性等，更多Firefox 59的规划可以查看这里。

开源项目

乐于分享，共推前端发展

• Rejoiner: Rejoiner是由Google开源的，能够基于gRPC或者其他的Protobuf资源自动生成统一GraphQL Schema的工具。它致力于灵活化GraphQL的定义与交互，方便多数据源连接。

• CSS Gridish: CSS Gridish能够基于产品的网格设计，自动生成多个资源文件：包含画板与网格布局设计的Sketch文件，包含了Flexbox兼容的CSS/SCSS CSS Grid代码，能够用于监测网页布局的Chrome插件。需要注意的是，该工具并不致力于辅助构建网格，而是帮你自动化地生成产品开发全流程中需要的资源文件，更多信息查阅这里。

• Greenlet: Greenlet能够将异步函数移入独立线程中，可以看做workerize函数的单函数简化版。不过需要注意的是，Greenlet仅支持纯函数，其会在独立的作用域中运行这些函数。

• Purgecss:当我们开发网页时，往往会使用Bootstrap，Materializecss以及Foundation这样的CSS库；不过实际上我们仅会使用其中的部分样式，其余的样式对于当前界面而言都可以算作冗余样式。Purgecss即可以帮助我们清除界面上的无用样式，它能够自动分析输入的HTML文件与CSS样式，并且进行选择器匹配，最终移除无用的CSS代码。

巅峰人生

• 专访ECharts团队：无KPI驱动如何做出成功开源项目:近日，国内知名的数据可视化开源项目ECharts发布了4.0版，InfoQ编辑对ECharts团队做了一个采访，了解团队的一些近况，对可视化的看法，以及在开源方面的一些经验。

前端之巅

前端之巅是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注前端之巅公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com，注明 “ 前端之巅投稿 ”。