宋秋晓

如果说让你对公司的新项目做一下前端的技术选型，在打包方面，你会想用什么？我相信，高票答案肯定是 Webpack。

前几天在面试的时候，和一个候选人聊到了生成海报的一些方案。想到我们的业务里也有类似的场景，就想来看看这种把 dom 生成图片都有哪些个方案，优缺点都是啥。能不能自己实现一个简单的方案，毕竟引入三方库可能会多一些可能会无用的代码，自己造轮子才是最精准解决需求的。

不知道你在工作中有没有接触过高阶组件，很多时候我是没什么机会去写一个高阶组件，所以这个东西在我这里就是一个理论知识储备，或许只会在面试或者是看其他人代码的时候才会去看看。前两天查了一个高阶组件内的 bug，查着查着我就突然在思考，为什么一个很简单的功能，要用高阶组件来实现，高阶组件能为我们带来什么呢？

最近使用函数组件的场景越来越多了 ಠ_ಠ，一直也在不断的摸索函数组件和类组件的区别，尤其是最近做的一个项目，简直完全就是函数组件的堆砌了，那么和 React 类组件相比，React 函数式组件究竟有何不同，难道真的就是简洁而已嘛？

在过去一段时间里，典型的回答是类组件提供了更多的特性（比如 state）。不过当有了 Hooks 后，答案就不再是这样了。

前段时间看浏览器性能优化的时候，对比多家网站，发现某大型网站的服务还在使用 HTTP/1.1，没有使用 HTTP/2 ，然后突然就好奇 HTTP/3 怎么样了。。。就来挖一下 HTTP 的事情

机缘巧合之下，曾经看到过一个 bug，具体表现为：iPhone 上的浏览器不能正确通过 CDN 鉴权。简单来说当时的情况是，我们需要同时上传 3 个文件，我们会用用户 token 来换 3 个独立的随机数 id，这三个 id 会被 CDN 服务器认为合法，用户可以直接上传到 CDN 上而无需在我们自己服务器上中转。

但 iOS 用户很快就出现了一个奇怪的问题，用户的 3 个文件只能成功上传 1 个，剩下 2 个就无法正常上传。再进一步调试后我们发现，在上传任意一个文件后，剩下两个 id 变成了非法。再进一步地，我们发现 Safari 的请求返回值，居然和我们预期的完全不一样…

要搞懂这个 bug 背后的原因，我们首先得了解一下，什么是幂等性。

面板介绍

先简单看下这个面板，他包含了四个大块。

1. Controls。开始记录，停止记录和配置记录期间捕获的信息。
2. Overview。 页面性能的高级汇总。更多内容请参见下文。
3. 火焰图。 CPU 堆叠追踪的可视化。
   您可以在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件。
4. Details。选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息。

Webpack 是什么

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

Webpack 有以下四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

我们先简单的看下这四个的具体解释：

Babel 是什么

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。比如：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
• 源码转换 (codemods)
• …

然而作为一款功能强大的 JavaScript 编译器，Babel 值得我们探索的远不止于此。这篇博客就以 Babel 的核心之一插件为切入点，探寻在开发实践中除了转译 ES6，Babel 插件到底有什么用？

前段时间集中处理了一波系统内的简历问题。其中有一个 bug 是客户上传的一封简历，系统内不显示了，一直提示「简历转档中」，最开始我查的时候，以为是简历 size 太大了，导致上传失败，后来发现是后端的文件转换问题。

但是如果确实是文件太大了怎么办呢？业务场景上不难遇到客户需要上传一个大文件的情况，如果失败了重试也要好半天。所以我们要怎么做才能快速上传，并且如果上传失败了，再次上传也能从失败的地方继续上传咧？