前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践

前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的 Web 前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。

前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• 《Facebook 发布代码优化工具 Prepack》：Prepack 是由 Facebook 发布的 JavaScript 源代码优化工具，它能够在编译时自动解析计算与重构代码；从而减少 JavaScript 包体的代码量，避免不必要的中间计算与对象分配过程，最终以提高代码的运行速度。( https://prepack.io/ )

• 《Next.js 2.3 发布》：在 Next.js 2.3 中，应用性能得到了进一步优化。主要的优化手段包括避免内联的 JavaScript 代码、使用异步脚本标签、进行脚本预加载以及引入更好的代码分割方式、更加灵活的 Prefetch API 等等。( https://jsmantra.com/faster-l... )

• 《PostCSS 6.0 发布》：PostCSS 6.0 放弃了对于 Node.js 0.12 的支持，清理了所有 raws API ，添加了对于 @apply 的支持并且进一步优化了内存占用。( https://github.com/postcss/po... )

• 《Jest 20 发布》：Jest 20 相较于 Jest 19 带来了更多的变化、进行了 Test Runner 的特性重写，并且添加了新的测试接口。新版本允许同时对多项目进行测试，并且完善了配置系统，使其更加灵活；另一方面，新版本中也带来了更多的内置测试接口，同时对文档与代码库进行了优化。( https://parg.co/btU )

开发教程

步步为营，掌握基础技能

• 《基于 Vue.js、Webpack、Material Design 打造 PWA 应用》：PWA 应用已经受到了越来越多的关注与实践，而本系列文章则介绍了如何使用 Vue.js、Webpack 以及 Material Design 打造 PWA 应用。本系列文章包含七个部分，分别介绍了基于 Vue.js、Webpack 与 Material Design Lite 创建单页应用、使用 Vue-Resource 与 VueFire 进行数据交互、使用 Service Workers 实现离线模式、拍照、上传图片、实现推送、访问设备地址等内容。( https://parg.co/btH )

• 《Create XP App》: 近日，微软的 Skype 团队发布了基于 React Native 的跨平台开发框架 ReactXP，而 create-xp-app 则是快速创建 ReactXP 应用的脚手架。本文则是对于 create-xp-app 的安装与基本使用的介绍，包括了如何运行在 Web 与 iOS/Android 等原生环境中，以及如何进行打包等内容。

• 《React 动画系列教程》：本系列教程着眼于介绍 React 动画开发相关知识，而本文则是从 CSS transitions 基础入手，介绍了 CSS transitions 的基础语法与进度条、导航栏等经典案例。( https://parg.co/bMF )

• 《掌握 Node.js 核心模块之文件系统》：本文介绍 Node.js 核心模块中与文件系统、文件流等相关的部分，同时还介绍了实际开发中常用的第三方文件库。本文首先介绍了基本的读取与写入操作，然后介绍了权限控制、监听等功能，最后讨论了使用 graceful-fs、mock-fs、lockFile 等优秀的第三方库来辅助开发。( https://parg.co/bMj )

• 《使用 React、Redux 以及 Webpack 创建 TODO 应用》：本文是面向新手的教学文章，介绍了如何利用 React、Redux 以及 Webpack 创建简单的 TODO 应用，包括利用 Webpack 搭建构建环境、编写基本的 React 组件以及使用 Redux 管理应用状态等内容。( https://parg.co/bMT )

• 《Vue.js 与外部交互》：Vue.js 是非常优秀的网页构建框架，不过我们往往会面临着比较割裂的开发情况，即网页中的一部分是交由 Vue.js 管理，而另一部分是交由其他脚本或者插件管理；这中情况在多团队协同开发或者对旧版本的改造时可能会碰到。而本文则介绍了应该如何使用 Vue.js 与外部其他脚本进行交互，譬如管理 head 、body 标签、监听键盘事件等等内容。( https://parg.co/bMw )

工程实践

立足实践，提示实际水平

• 《使用 Electrino 减少近 99% 的应用大小》：Electro 是非常不错的利用 Web 技术开发跨平台桌面应用的运行时，不过其缺陷在于打包的应用中往往需要携带 Node.js 与 Chromium 的完整框架，导致了即使是最简单的 HelloWorld 应用也有近 115MB。而 Electrino 提供了类似于 Electron 的接口，不过使用系统自带的 Web 运行时来替代 Chromium，从而保证最后打包出来的应用仅有原来的 0.1% 大小。Electrino 适用于那些不依赖于操作系统本身功能的应用，项目也处于开发状态。( https://parg.co/bM2 )

• 《饿了么的 PWA 升级实践》：本文介绍了饿了么利用 Vue.js 与 PWA 开发其移动 Web 端过程中的实践经验，包括 PRPL 模式的实现、多页面性能优化、用户体验优化等等内容。( https://parg.co/bMz )

• 《使用 Brotli 压缩加快网页响应速度》：提升网页响应速度是 LinkedIn 工程师的首要关注之一，常见的提升方法就包括了如何减少浏览器与服务端之间传输的数据量。目前，主流的压缩算法当属 Gzip，而本文则介绍了 LinkedIn 尝试在部分现代浏览器上采用 Google 工程师 2015 年提出的 Brotli 开源压缩算法的考虑过程；Brotli 专注于文本压缩，其相较于 Gzip 能够带来 20% ~ 30% 的体积减少。( https://parg.co/bMx )

• 《调试 Node.js 应用的最佳工具》：调试，也就是寻找与修复软件中存在问题的过程一直是 Node.js 项目构建过程中的挑战之一，而本文则是介绍了如何利用那些优秀的工具来辅助进行 Node.js 代码调试。本文首先介绍日志相关内容，恰当的日志能够帮助开发者在生产环境中迅速定位到错误所在；然后本文介绍了如何在开发环境中直接调试 Node.js 应用。( https://parg.co/bMB )

• 《Github Pages 与单页应用》：单页应用 SPA 以及日渐成为目前主流的网页呈现方式，并且构建功能丰富的高性能 Web 应用也日渐容易。本文则是介绍了不同的单页应用的部署方式，包括 Google App Engine、now、以及 Github Pages 等；本文重点介绍了 Github Pages，从概念介绍、仓库设置、自动部署、以及常见的 Github Pages 使用过程中的实践。( https://dev.to/_evansalter/gi... )

深度阅读

深度思考，升华开发智慧

• 《Node.js 根本没有 float：浮点反序列化错误背后的故事》：在 Node.js 中，当我们把一个浮点数序列化，再反序列化，居然出错了，这是为什么呢？作者通过刨根问底的追查，发现 Node.js 根本没有 float！( https://parg.co/bMX )

• 《JavaScript 代码风格要素》：本文是 Eric Elliott 编写的 JavaScript 代码风格要素指南与建议，其借鉴了 1920 年的面向英文语言的 “The Elements of Style” 一文。本文介绍的关键要素包括：使用函数最为组合的原子单元并且保证函数的单一职责性、移除不需要的代码、使用更直观具有自解释性的变量命名、根据特性进行代码划分等等。( https://parg.co/bMn )

• 《函数式组件的函数式调用》：本文是来自 Missive 的工程师分享了他们在基于 React 进行应用开发时的技巧，即如果直接以函数调用而非组件的方式来使用函数式组件，可以避免对于 React.createElement 的调用，最终相同组件的渲染耗时可以节约近 45%。( https://parg.co/bMa )

• 《Chrome Canary（M60+）中的 ES6 原生模块》：Chrome Canary 开始支持 ES6 原生模块，本文则是介绍了如何在 Chrome Canary 中使用 ES6 原生模块以及基本语法、如何利用 ES6 原生模块的新特性来发布代码、如何兼顾旧版本浏览器等内容。( https://parg.co/btb )

• 《支付宝前端构建工具的发展和未来的选择》：本文介绍了支付宝前端构建工具的发展史，从 spm 到 ant tool，对于工具的中心化与去中心化进行了反复的考量。然后介绍了对于未来前端构建工具的选择，包括要放弃特定业务脚手架针对通用型构建配置进一步修改或者封装的这种方式、抹杀 webpack.config.js 这种形式、实现语义配置等。( https://github.com/pigcan/blo... )

开源项目

乐于分享，共推前端发展

• 《k6》：k6 是基于 Go 与 JavaScript 开发的现代压测工具，它提供了非常清晰简单的 JavaScript 接口；同时它基于 Go 提供了分布式的部署方案，支持云端部署与 REST 接口控制。( https://github.com/loadimpact/k6 )

• 《sakura》：Sakura 是轻量级的 CSS 预置样式库，我们只需要简单地引入 Sakura 样式文件到网页中就能将朴素的网页转化为较为美观的、可读性较好的页面。( https://github.com/oxalorg/sa... )

巅峰人生

前端之巅

「前端之巅」是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到[e-mail]，注明“前端之巅投稿”。