前端每周清单第 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，以可读性更好的方式查询数据属性值，监控异步函数调用等。更多 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 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com，注明 “ 前端之巅投稿 ”。