在 上一轮优化 里， 我们通过优化一些构建工具和流程， 把构建耗时优化到了 4min 左右，整体发布耗时从 15min 优化到了 8 min 左右, 有较大提升， 但是依旧存在提升空间。

目前我们都是统一使用的原图，原图可能有 1024 * 1024，但实际展示可能很小，这样不可避免造成了一些流量的浪费，这么大的流量，也导致我们的页面加载不够快，尤其一些长列表的时候，因为图片尺寸的压缩，让我们的页面有一些卡顿。

背景上一篇文章我们分析了：为什么 esbuild 这么快。还有数据对比：可以看到： esbuild 一骑绝尘, 以绝对优势领先。但是看看最下面, 赫然是我们最熟悉的 webpack。那么, webpack 的构建为什么慢呢？ 到底慢在哪呢 ？下面是我的一些思考，分享给大家，希望对大家有所帮助。正文首先我们先看一下 webpack 构建的大致流程:...

前言esbuild 是新一代的 JavaScript 打包工具。他的作者是 Figma 的 CTO - Evan Wallace。esbuild以速度快而著称，耗时只有 webpack 的 2% ～3%。esbuild 项目主要目标是: 开辟一个构建工具性能的新时代，创建一个易用的现代打包器。它的主要功能：Extreme speed without needing a cacheES6 and CommonJS modulesTree s...

背景今天又被 QA 找: 这个页面昨天还好好的, 今天就白屏了, 是不是你代码有问题啊, 赶紧看看。上去一看， 找到了原因：原本 pickup, dropoff 两个字段没有数据的话， 应该返回{}, 结果现在pickup字段返回了null, 而我们取值的时候，也没对这个地方做防御。 {代码...} 结果就是：脚本报错， 页面不可用。解决起来也很简单...

前言这几天心里颇不宁静。想的事情比较多， 没有一个是关于技术的。今天和大家聊聊一个我们都很关心的话题：晋升。下午拉了个会， 和我几个下属聊了一下这个话题， 自己也有一些新的感受。在这里记录一下， 顺便分享给大家， 希望对大家有所启发。今天的主要内容：我为什么要晋升？什么样的人更容易晋升？我如何才能晋升...

背景并发冲突问题， 是日常开发中一个比较常见的问题。不同用户在较短时间间隔内变更数据，或者某一个用户进行的重复提交操作都可能导致并发冲突。并发场景在开发和测试阶段难以排查全面，出现线上 bug 以后定位困难，因此做好并发控制是前后端开发过程中都需要重视的问题。对于同一用户短时间内重复提交数据的问题，前...

背景前几天晚上下班的时候， 路过隔壁项目组， 听他们在聊项目构建的事：现在线上打包时间太长了， 修个 bug 1 分钟， 发布一下半小时, 贼难受。他们项目比较庞大， 线上构建时间特别长， 基本都在15分钟以上。和他们简单聊了会， 回去瞅了一下自己项目的构建时间：其实也挺长的， 于是抽空优化了一下， 效果还是比较明...

背景在之前的一篇文章中， 我们遇到了一个项目在构建时内存溢出的问题。当时的解决方案是: 直接调大 node 的内存限制，避免达到内存上限。今天听同事分享了一个新方法，觉得不错， 特此记录， 顺便分享给大家, 希望对大家有所帮助。正文直接上报错示意图：提示已经很明显： Javascript Heap out of memory.看到内存溢出...

背景最近，就 前端开发过程中的痛点及可优化项 做了一次收集。 其中，构建耗时、项目编译速度慢 的字眼出现了好几次。随着业务的快速发展，我们很多项目的体积也快速膨胀。 随之而来的， 就是打包变慢等问题。提升研发效率，是技术人永恒的追求。我们项目也有启动慢的问题，同事也提到过几次。 刚好我之前也做过类似的探...

前言2020， 过的真快。在这一年里， 发生了很多事情。 虽然有一些小的成就，也有很多遗憾。正文全年回顾今年主要做了什么呢？简单列一下：完成了业务系统的一次大重构。做了技术升级， 接入了新的 UI/UX， 完成了多国家业务推广的技术支持工作。负责部门的前端技术分享和培训，搭建了部门技术博客并投入使用。参加了公司...

2020.12.21 号， Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbåge 联合发布了一项 React 新功能：

背景长列表优化， 是页面性能优化中的一个比较常见的问题，也是面试中的常客。刚好最近在的项目中， 遇到了一个长列表的性能问题，试过多种方案， 最后得以解决。今天就给大家分享一下。正文场景描述用户需要批量修改 Product中 sku 的 映射关系，可以选择的 Product 的 数量不限。每一个 product 对应的 sku 数量为 1 ...

React 是一个十分优秀的UI库， 最初的时候， React 只专注于UI层， 对全局状态管理并没有很好的解决方案， 也因此催生出类似Flux, Redux 等优秀的状态管理工具。

背景性能优化是永恒的话题。 我们或多或少都处理过性能优化的需求， 页面的性能优化， 主要是通过减少非必要的渲染来实现。非必要的渲染， 可以是减少渲染的节点数量， 也可以是减少不必要的动画。今天要介绍的就是通过减少antd长列表的动画，来达到优化目的实用小技巧。希望大家看过之后， 留个印象。正文最近在做一个 ...

我们都知道， AntD 最近喜提了4.0, 更新了许多新特性，看的我是心花怒放， 喜不自胜。 更贴心的是还提供了升级工具，看了一些文章介绍说能三分钟升级。 于是周六的时候， 懒觉我也不睡了， 跑到公司开始了升级之旅。

背景 早上看到几个React 工具包， 看完之后觉得很不错，刚好我后面的一些开发任务也需要用到， 推荐给大家看看。 正文 三个工具 分别是： react-onclickoutside react-lazy-load-image-component react-toastify 1. react-onclickoutside 包如其名， 就是处理点击到元素外部的时候,需要处理的一些事件。 常见于点击容器...

背景下午在搞代码部署的时候， 遇到一个文件大小写的问题， 问题比较简单， 但是也简单整理下， 分享给大家。正文下午在搞代码部署的时候， 线上编译失败了， 看了下错误日志: {代码...} 文件没找到, 可是我看了看代码， 这不是好好地在这吗？到线上仓库看了一下， 文件名是小写的 userModal。怪不得文件找不到。知道错...

背景AST 是非常有用的。今天下午听了小组一个老哥做的AST分享，深以为然。为了加深印象，就写了篇总结，顺便分享给大家，希望能给朋友们一些启发。AST有用，口说无凭， 且看几个具体的案例。且不说： Vue => React React => Vue的代码转换方法，我们就看一个可以无痛升级旧版React的工具：react-codemod代码地址：...

背景 上一篇文章， 我们熟悉了树， 二叉树， 二叉搜索树的基本概念， 以及做了对应的实战题目： 树， 二叉树， 二叉搜索树 && 实战练习 今天我们继续树这个话题。 本文的主要内容包括： 理论：树的前中后遍历 理论：广度优先搜索 理论：深度优先搜索 理论：树的层次遍历 实战：Leetcode题目演练 树是一种比较常...

背景 树， 是一种常见的数据结构， 有很多的应用场景， 也是面试中的常客。 比如：树的遍历， 分层打印， 平摊的数据转成树， 等等。 这就需要我们对树这种数据结构有个基础的认识，今天我们就再回顾一下这种数据结构。 正文 今天的内容主要包括： 树 二叉树 二叉搜索树 实战题目 树 讲树之前， 我们先回顾下链表。 实际...

背景 中午没事看到了这道题， easy 级别的一个题目， 就用了几种方法做了一下， 给大家伙看看。 题目描述：给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的字母异位词。 示例 1:输入: s = "anagram", t = "nagaram"输出: true 示例 2: 输入: s = "rat", t = "car" 输出: false 说明: 你可以假设字符串只包含...

背景在职业发展的道路上，我们总会面临这样的抉择：是在技术的路上一条路走到黑，做技术专家接触管理， 走上管理年龄大了，搬砖没人要，转型 or 去公司楼下卖炒粉我曾经有个小小的愿望： 在毕业5年内，能做点管理相关的东西。这个愿望，在我毕业的第四年实现了。说起来也我是机缘巧合，遇到了贵人，加上我自己的努力， ...

背景 Hooks 自推出以来就很火， 它改变了我们编写React 代码的方式， 有助于我们写更简洁的代码。 今天这边文章不是说Hooks的，Hooks之外， 还有很多实用的技巧可以帮助我们编写简洁清晰的代码。 今天我就整理了几个使用的技巧，其中有些也是我在公司项目中实践的，现在整理出来分享给大家， 希望对大家有所启发。 正文 ...

背景 React Hooks 已经推出快一年了，改变了我们的开发方式，也收到了越来越多的开发者的喜爱。 我们平时在开发过程中， 肯定也会自己写一些自定义的Hook， 下面我就分享4个比较实用的， 希望对你有所启发。 正文 1. useTimer 一般处理时间懂， 我们都会习惯性的用moment： {代码...} 但是这个库体积还是比较大的： 一般...

前言Hooks 是 React 中比较火的一个概念， 用过的小伙伴都说好。但是, 在使用 Hooks 的时候，我们可能会有很多疑惑:为什么 useEffect 第二个参数是空数组，就相当于 ComponentDidMount ，只会执行一次？为什么只能在函数的最外层调用 Hook，不能在循环、条件判断或者子函数中调用？自定义的 Hook 是如何影响使用它的函数...

深入了解 ES6 Modules当下， 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的，模块化已经是常态。我们对它并不陌生，今天，我们就再系统的回顾一下ES6的模块机制， 并总结下常用的操作和最佳实践， 希望对你有所帮助。一些简单的背景随用随取， 是一种我们都希望实现的机制。在 Javascript 中也一样...

背景 本文是 「2019年，看了这一份， 再也不怕前端面试了」中的一部分： 参考了之前写过的博客和额外的资料， 分享给大家， 希望能给大家带来一些启发和帮助。 如需转载，请联系作者获得许可。 正文 上下文 是Javascript 中的一个比较重要的概念， 可能很多朋友对这个概念并不是很熟悉， 那换成「作用域」 和 「闭包」呢...

背景 之前出去面试的时候， 经常会被问到一些安全方面的问题。 安全涉及的领域很大， 我也仅仅是了解一些皮毛， 每次面试前都要找资料复习， 很麻烦。 所以我就根据之前搜集的一些资料和面试的经验，系统的梳理了一下，希望对大家有所帮助。 正文 首先简单介绍几种常见的攻击方式： SQL注入 XSS CSRF 点击劫持 中间人攻...

背景 ​2018年写过一次前端面试复盘的文章， 反响很不错。 2019年情况又有所不同， 我就结合去年的一些经验和今年观察到的一些情况再总结一篇， 有需要面试的朋友可以参考下。 先说下我去年面试的一些情况吧. 18年七八月份的时候我出来面试，面试了几家，大概有: 腾讯， 阿里， 有赞， 玖富证券，Shopee， 还有两个不记得...