9.19 早上还在写代码，然后收到 HR 的消息去会议室，15 分钟就结束了，不需要交接，当场取消所有权限，归还设备之后就回家了，神奇的体验。

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

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

于是这两天抽空对项目做了一次构建优化，线上(多国家)构建时间, 从 10分钟 优化到 4分钟, 本地单次构建时间， 从 300秒 优化到 90秒， 效果还不错。

背景上一篇文章我们分析了：为什么 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, 而我们取值的时候，也没对这个地方做防御。 {代码...} 结果就是：脚本报错， 页面不可用。解决起来也很简单...

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

背景之前部门想要统一代码编辑器， 最后决定统一用 VS Code。我之前也有写这篇文章的想法，于是就主动报了名。所以就有了今天这篇，一篇详细介绍 VS Code 的文章。中间参考了不少资料，如有错误，欢迎留言指出 :)文章主要内容：VS Code 概览VS Code 介绍VS Code 技术路线VS Code 技术组成VS Code 为优化性能做的努力VS C...

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

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

背景前段时间， 部门在热火朝天的搞各类组件库。 做组件库，不可避免的就需要做组件的展示和说明， 要用到一些文档工具。我们项目里面也尝试了几种不同的文档工具，今天和大家分享一些经验， 希望对大家有所帮助。正文目前， 我们的组件库， 一共使用三种文档工具， 分别是：Story BookDoczDumi下面我会根据实际的使用情...

前言Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9...

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

背景今天PM过来问我: 蛋总，有些用户反馈他们屏幕太小了，需要滑动， 操作不方便。 我们的系统能不能改成自适应布局啊?我顿时虎躯一震：woc, 要把一个迭代了一年多的固定设计的产品，改成自适应布局? 真让人害怕。然后我就去查了一些自适应布局的资料，尝试找出一种改造成本最小的方案。过程中发现了一个比较好玩的东西...

背景在平时的开发中，快速定位需求所在的代码文件，是十分常见的需求。一般来说，常见的定位源码的方式有：搜索页面关键字页面路由Devtool 中的组件名好的记忆力 🤪这些方式往往效率都不是很高，而且可能需要很长的操作路径才能达到目的， 比较麻烦。如果通过点击页面，能直接打开代码所在的文件， 岂不是美滋滋 ？今天我...

这两天做 Code Review 的时候， 发现很多 if-else / switch 语句，并不是特别优雅。 在一些逻辑复杂的地方，看起来比较臃肿， 不是那么好读。

今天看到一个不错的动画网站：[链接]可以自己编辑生成动画，并且能十分方便的引入到你的项目中。比如上图的猫咪动画： {代码...} 借用这个能力， 我们可以让loading效果更有趣味：网站中还有大量的素材可以免费使用：感兴趣的可以去看一下。

背景我最近将一些 Vue2 项目从 vue-cli(webpack)迁移到了 vite。在第三次这样做之后，我对迁移过程做了一些详细的记录，并将在这篇文章中进行总结。文章目录：package.jsonindex.htmlvite.config.js测试用例Lint发布可视化 Bundle一些指标结论正文package.jsondevDependencies删除 @vue/cli-service 依赖项，并替换为 vi...

背景TypeScript 3.8 带来了一个新特性：仅仅导入 / 导出声明。在上一篇文章中， 我们使用了这个特性，解决了: 引入类型文件报错的问题。其实这个特性并不复杂，但是我们需要了解其背后的机制原理，并了解 Babel 和 TypeScript 是如何一起工作的。本文主要内容：什么是「 仅仅导入 / 导出声明 」Babel和TypeScript是如何...

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

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

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

背景本文接上篇： 上文中， 我们了解了 chunks 三个字段的含义， 以及每个字段对应的行为。今天是实践篇。修改短短几行配置， 就达到了数百毫秒的优化效果。正文我的这个项目， 迭代一年多了， 中间打包配置也没没怎么改过， 毕竟也没什么问题， 速度也还可以。刚好最近老板要搞指标， 让每个项目组分析性能数据， 给优...

背景在上篇文章： 记一次 「 无限列表 」滚动优化 中， 我介绍了「 如何优化一个无限滚动列表 」。用到了懒加载方案， 一个关键点是：需要判断元素是否在当前视区。我们今天就看看这个问题。今天的主要内容包括：使用元素位置判断元素是否在当前视区使用 Intersection Observer 判断元素是否在当前视区实例：懒加载实例...

现在比较多的项目用的都是webpack4, webpack 4 舍弃了之前的 commonChunkPlugin，增加了 SplitChunksPlugin。

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

背景Chrome 团队今年发布了不少新的功能，帮助开发者提升网页开发体验。在最近的 Google 开发者大会上，介绍了最新的七大功能，它们分别是:支援css-in-js的框架的样式编辑模拟时区功能Lighthouse 量化使用者体验Issues 面板媒体面板一件修复文字的色彩对比及时模拟色觉障碍我在周末整理了一下这些内容， 非常详细。下面...

前言一切要都要从打包构建说起。当下我们很多项目都是基于 webpack 构建的， 主要用于：本地开发打包上线首先，webpack 是一个伟大的工具。经过不断的完善，webpack 以及周边的各种轮子已经能很好的满足我们的日常开发需求。我们都知道，webpack 具备将各类资源打包整合在一起，形成 bundle 的能力。 可是，当资源越来越...

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