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

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（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，以可读性更好的方式查询数据属性值，监控异步函数调用等。更多 JavaScript 学习参阅现代 JavaScript 开发基础。
• 一些有趣的 ECMAScript 2017 尚未接纳的提案: 随着 polyfills 与转换器的流行，很多还处于早期的提案在完成之前就在开发者之间获得了极大的欢迎，本文即是对 ECMAScript 2017 尚未接纳的提案中一些有趣的进行分享。作者首先讨论了 ECMAScript 提案的五个进程，然后讨论了 Asynchronous Iteration,Class Improvements,Class Decorators,Import Function,Observables,Do Expression,Optional Chaining 等特性。更多 JavaScript 学习参阅现代 JavaScript 开发基础。

工程实践

立足实践，提示实际水平

• 利用 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 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 [e-mail]，注明 “ 前端之巅投稿 ”。