前端每周清单第 48 期：Slack Webpack 构建优化，CSS 命名规范与用户追踪，Vue.js 单元测试

看新闻很累？看技术新闻更累？试试下载 InfoQ 手机客户端，每天上下班路上听新闻，有趣还有料！

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

新闻热点

国内国外，前端最新动态

• ECharts 4.0 发布: 2018 年 1 月 16 日，百度的 ECharts 团队对产品进行了更新，发布了时隔两年的大版本 4.0。在 ECharts 4.0 新版本中，主要在性能功能、易用性及扩大使用范围三个大的方面进行了八项升级：带给用户更强大的性能和功能，让开发者使用 ECharts 变得更加轻松，让更多的人在更多的场景都能访问使用 ECharts 制作的可视化产品。
• Puppeteer 1.0 发布: Puppeteer 是由 Google Chrome 团队开源的，Headless Chrome 操作接口库，已成为事实上的 Headless 浏览器操作标准。本周 Puppeteer 1.0 正式发布，为我们带来了 Chromium 65，page.coverage API，page.pdf() 支持自定义头部与脚部，XPath 支持增强，target.createCDPSession() 兼容原生协议等特性变化。
• jQuery 3.3.0 发布: jQuery 仍然是很多 Web 开发工作中不可或缺的部分，自上次 jQuery 大版本更新以来，其核心团队更多地着眼于应该移除什么部分，而不是添加新的功能特性，来保证 jQuery 的小巧易用性。该版本中移除了部分过时的 API，并且为 .addClass(), .removeClass(), 以及 .toggleClass() 这几个函数支持输入某个样式类名数组作为参数。
• Angular 5.2 发布: Angular 5.2 发布，其可以直接替代之前的 5.1 版本，包含了部分错误修复与性能提升。新版本中，优化了对于模板的类型检查，添加了对于 TypeScript 2.6 的支持，优化了 Router 参数与数据继承。

开发教程

步步为营，掌握基础技能

• 无缝为 create-react-app 项目添加 SSR + 代码分割特性: create-react-app 是非常不错的原型化工具，能够快速搭建 React 基础应用。本文即是介绍在无需弹出配置的情况下，为 create-react-app 创建的项目添加服务端渲染与代码分割异步加载的特性；本文依次介绍了服务端渲染、基于 react-loadable 的代码分割、服务端代码分割、利用 Webpack 的 chunkNames 特性等内容。更多 React 学习参考 React 与前端工程化实践。
• Vue Devtools 4.0 新特性介绍: 日前 Vue Devtools 发布了 4.0 大版本更新，引入了一系列的新特性与提升，本文即是对这些变化进行深入解读。本文介绍的新特性包括了组件数据可编辑、在外部编辑器中打开组件、展示原始组件名、优化组件审查方式、根据组件过滤事件、可伸缩的审查器等；更多 Vue.js 学习资料参考 Vue Reference 。
• CSS 命名规范，加速你的代码调试: 维护大型的 CSS 代码库并非易事，特别是那些随意散漫未经组织的 CSS 代码极易变成一团乱麻；本文则深入浅出地介绍了 CSS 命名规范，来帮助开发者编写优质的代码。本文首先讨论了连字符与 camelCase，然后介绍了 BEM 的含义与用法，最后讨论了如何设置合适的 JS 操作类；更多 CSS 学习资料参考 Web 开发基础与工程实践。
• 纯 CSS 的网页追踪方案: 我们经常会从用户访问的网页中，采集某些用户相关的偏好数据，譬如他们对于某些链接的点击情况等等。本文则是提出了一种不使用 JS，纯粹依赖于 CSS 来进行网页追踪与分析的方案，其依赖于用户点击某个链接或者悬停在某个元素之后，浏览器添加的默认样式类；该方案目前能够用于采集用户的访问与查看情况，更多 CSS 学习资料参考 Web 开发基础与工程实践。

工程实践

立足实践，提示实际水平

• 菜鸟网络前端全栈化之路: WEB 前端开发在开发体系里面是一个特殊的群体，阿里早期给前端的定义是“D2”，D2 的含义是：developer & designer。这么一个定位就直接导致了基础教育阶段的人才是空白的，也导致了前端优秀人才特别少，招聘难的问题，随之带来的问题往往会成为整个研发链路的瓶颈。另外近几年随着无线的快速发展，前端在 PC 传统流域的优势逐渐在丧失，而无线端随着无线动态化技术的发展，web 前端又再次受到发展空间的挤压。在这样的情况下前端这个岗位其实需要一些比较大的突破和改变。而 web 前端传统价值的中台化和新领域的拓展变的尤为重要。今天我要分享的就是菜鸟是如何实施前端技术中台化和推动开发全栈的一些经验。
• 来自 Slack 的 Webpack 构建性能优化: Webpack 已然是主流的前端打包工具之一，不过其繁荣的第三方插件生态反而会使得，优化 Webpack 的构建性能成为了一件不容易的事情。本文即是来自 Slack 的工程师，分享的他们在重构整个前端过程中累积的，如何优化 Webpack 构建性能的经验；本文主要从衡量并且分析构建耗时的组成、并行化构建流程、减少构建工作、使用缓存、优化硬件等几个方面。更多 Webpack 学习资料参考 Webpack Reference 。
• 编写 Vue.js 单元测试时需要规避的五个陷阱: 单元测试是应用开发中不可或缺的部分，本文作者会循序渐进地，以具体的例子来介绍日常开发中会用到的 Vue.js 单元测试的例子。作者希望在本文中讲清楚如何测试、应该测试哪些，并提醒开发者注意避免五个坑：等到最后再测试，测试了不恰当的内容，搞混了 Test Doubles，结构过度耦合，过度追求测试覆盖率等；更多 Vue.js 学习资料参考 Vue Reference 。

深度阅读

深度思考，升华开发智慧

• 理解 React 源代码: React 为我们提供了直接易用的，以状态为核心的前端应用开发方式，本系列文章则着眼于分析 React 内部工作原理。依次讨论了 React 中简单组件、类组件等渲染流程；更多 React 学习参考 React 与前端工程化实践。
• Node.js 内建模块加载机制: 本系列文章着眼于分析 Node.js 内部原理，首篇文章讨论了 Node.js 的主进程是如何启动的。接下来作者又分析了在主进程初始化过程中，是如何加载内建模块的，然后还深度分析了 os 包的实现；更多 Node.js 学习参考深入浅出 Node.js 全栈架构。
• 不曾了解的 JS 特性: 本文作者在通读了 MDN 文档之后，惊讶地发现了很多他不曾了解的 JS 特性与 API；本文即是作者的读后总结分享，JS 也是学无止境啊。作者在本文中介绍了 Label Statements，void 操作符，Comma 操作符，with 条件操作符，国际化 API，管道操作符，setTimeout 参数等等；更多 JavaScript 学习参阅现代 JavaScript 开发基础。

开源项目

乐于分享，共推前端发展

• After.js : After.js 是类似于 Next.js 的 React 服务端渲染框架，不过其是由了 React Router 作为路由系统，而不像 Next.js 那样自建路由系统。After.js 同样践行了组件即路由的理念，支持基于路由的代码分割、基于路由的变换、分析、数据加载、数据预加载等。
• dialog-polyfill : 上周的清单中我们介绍过 HTML 5.2 中引入的 dialog 标签，dialog-polyfill 则是由 Google 开源的，dialog 的适配库。不同于第三方组件或者框架提供的弹窗功能，原生的 dialog 标签更为简单易用，并且其可访问性也更好，浏览器也能够针对该标签进行优化。
• JARVIS : J.A.R.V.I.S. (Just A Rather Very Intelligent System) 是 Webpack 实时监控工具，其能够将开发环境或生产环境下的 Webpack 构建信息实时展示到浏览器中。JARVIS 借鉴了 Webpack Dashboard 等流行的 Webpack 监控工具，然后提供了可优化的 ES Harmony 模块统计、将资源分割为不同的类别等扩展功能。
• 1Backend : 1Backend 是自部署的 Serverless 平台，其设计目标是简化 Lambda 函数与微服务的部署、运行、维护流程。1Backend 使得开发者能够快速开发服务，其支持 Go，JavaScript，TypeScript，MySQL 等常见的技术栈。
• Prisma : Prisma 能够将数据库转化为 GraphQL API；其允许用户自定义数据模型，然后快速地转化为可用的 GraphQL 服务器。Prisma GraphQL API 提供了强大的数据抽象与构建块，来辅助开发灵活可扩展的 GraphQL 服务端，包括了类型安全的 API，声明式 DSL 的数据模型、实时接口、与流行前端框架无缝兼容等。

巅峰人生

• 对话 AI 专家洪亮劼：这次，我们全方位聊聊人工智能: 洪亮劼，极客时间《AI 技术内参》专栏作者，电子商务平台 Etsy 数据科学主管，前雅虎研究院高级研发经理。长期从事机器学习与人工智能的基础以及应用研究，积累了丰富的学术研究和工业实践经验，对推荐系统、搜索引擎、计算广告学、社交网络以及自然语言处理等领域有非常深入的理解。本文从人工智能的落地、观点、人才培养与招聘、学习等几个角度来聊聊人工智能。

前端之巅

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

感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。