Taobao FED

主页

happypack 原理解析

说起 happypack 可能很多同学还比较陌生,其实 happypack 是 webpack 的一个插件,目的是通过多进程模型,来加速代码构建,目前我们的线上服务器已经上线这个插件功能,并做了一定适配,效果显著。这里有一些大致参考: 这张图是 happypack 九月逐步全量上线后构建时间的的参考数据,线上构建服务器 16 核环境。 在上这个插件的过程中,我们也发现了这个单人维护的社区插件有

React 组件间通讯

React 组件间通讯说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父子:Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1 兄弟:Child_1 与 Child_2、Child_1_1 与 Child_2、e

聊一聊 JavaScript 中的错误隔离

接口请求失败、接口中部分数据缺失、运营数据不符合预期… 当我们的应用发布上线后,就开始面临这些风险。 而一旦这些问题导致了 JavaScript 报错(如空指针异常),并且没有被有效地隔离,就有可能引发页面的白屏、无法交互等线上问题。 在双 11 准备期间,我们收集了过往一年前端相关的线上问题,在收集的 21 个案例中,竟有一半的问题都与「数据异常触发页面显示异常」这个原因有些相关。 如何将错误

ES6 你可能不知道的事 - 进阶篇

前言这篇文章主要会针对上篇未涉及到的进阶特性展开;而与前一篇文章相同,本文主要介绍这些特性的一些容易忽略的部分,希望能对大家正确认识和使用 ES6 有帮助。 还是那句话,时间和能力有限,针对文章中的问题或不同意见,欢迎随时拍砖、指正! 正文Module模块化是个进行了很久的话题,发展历程中出现过很多模式,例如 AMD, CommonJS 等等。 Module 是 ES6 的新特性,是语言层面对模

如何 hack Node.js 模块?

为何要去 hack?在业务开发过程中,往往会依赖一些 Node.js 模块,hack 这些 Node.js 模块的主要目的是在不修改工具源码的情况下,篡改一些特定的功能。可能会是出于以下几种情况的考虑: 总是存在一些特殊的本地需求,不一定能作为工具的通用需求来暴露正常的 API 给更多的用户。 临时且紧急的需求,提 PR 已经来不及了。 为什么不直接去改源码?考虑到工具会不定期升级,想使用工具

揭秘浏览器远程调试技术

调试技术的起源1947 年 9 月 9 日,一名美国的科学家格蕾丝.霍普和她的同伴在对 Mark II 计算机进行研究的时候发现,一只飞蛾粘在一个继电器上,导致计算机无法正常工作,当他们把飞蛾移除之后,计算机又恢复了正常运转。于是他们将这只飞蛾贴在了他们当时记录的日志上,对这件事情进行了详细的记录,并在日志最后写了这样一句话:First actual case of bug being foun

Velocity NYC 2016 参会总结

就在刚刚过去的九月,作为 FED 团队的代表有幸参加了美国纽约的 Velocity Web 性能和敏捷运维大会。在大约一周的行程中,会议团队组织了十分丰富的行程,会议团队也在内部对于 Velocity 的演讲内容做了多次讨论。整个行程在我看来是十分圆满的。 Velocity @ NYCVelocity 作为 O’Reilly 旗下的老牌会议品牌,从 2008 年开始专著 Web 性能、DevOp

理解 Babel 插件

前言相信目前常与 ES6 代码打交道的同学对 Babel 应该不会陌生,在 ES6 代码被编译转化为 ES5 代码的过程中,Babel 插件显得尤为重要,我们最后经由 Babel 生成的代码取决于插件在这一层中做了什么事,在探索这其中的过程之前,我们先来了解下一些所需的基础知识。 抽象语法树Babel 的工作流可以用下面一张图来表示,代码首先经由 babylon 解析成抽象语法树(AST),后经

Node.js 和 C++ 之间的类型转换

我非常喜欢使用 Node.js,但是当涉及到计算密集型的场景时 Node.js 就不能够很好地胜任了。而在这样的情况下 C++ 是一个很好的选择,非常幸运 Node.js 官方提供了 C/C++ Addons 的机制让我们能够使用 V8 API 把 Node.js 和 C++ 结合起来。 虽然在 Node.js 官方网站有很多的关于怎么使用这些 API 的文档,但是在 JavaScript 和

细说 webpack 之流程篇

引言目前,几乎所有业务的开发构建都会用到 webpack 。的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合,它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒,首先来谈谈它的流程。 准备工作1. webstorm 中配置 webpack-webs