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

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

背景上一篇文章我们分析了：为什么 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分钟以上。和他们简单聊了会， 回去瞅了一下自己项目的构建时间：其实也挺长的， 于是抽空优化了一下， 效果还是比较明...

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

背景在平时的开发中，快速定位需求所在的代码文件，是十分常见的需求。一般来说，常见的定位源码的方式有：搜索页面关键字页面路由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.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 面板媒体面板一件修复文字的色彩对比及时模拟色觉障碍我在周末整理了一下这些内容， 非常详细。下面...

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

背景周末在网上冲浪， 看到个消息：NextJS 9.3 将静态站点生成功能引入了NextJS平台。静态站点生成, 也就是所谓的 SSG : Static Site Generation。喝了口水，顺便回忆了下现在的几种渲染模式：SSR (Server Side Rendering)SSG (Static Site Generation)SSR With hydrationCSR with Pre-renderingCSR (Client Side Render...

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

背景React Hooks 已经出来有段时间了， 很多小伙伴或多或少都用过。今天呢，我们就回头再看一下这个东西，思考一下，这个东西为什么会出现，它解决了什么问题， 以及背后的设计理念。正文如果你有 Hooks 的使用经验， 可以思考一下这两个问题：Hooks 为什么会产生Hooks 解决了什么问题我们先主要围绕这两点展开讨论。1. ...

背景VS Code应该都很熟悉，平时吃饭的工具， 每天都要用。它是微软出的一款轻量级代码编辑器，免费而且功能强大，以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐。对JavaScript和NodeJS的支持非常好，自带很多功能，如代码格式化，代码智能提示补全等。对于VS Code 插件开发， 大家可能不太熟悉， 但是...

背景这一个因为滚动条占据空间引起的bug, 查了一下资料， 最后也解决了，顺便研究一下这个属性， 做一下总结，分享给大家看看。正文昨天， 测试提了个问题， 现象是一个输入框的聚焦提示偏了， 让我修一下, 如下图：起初认为是红框提示位置不对， 就去找代码看： {代码...} 代码上没有什么问题， 不是手动设置的，而且，...

背景本文接上篇， 继续我们的《CSS》 创意构想。因为有一些案例没有代码， 本着学习的态度， 我需要一个个补齐， 也方便大家看。更新的时候可能就按小节， 逐步更新。废话不多少， 开始正文吧。------正文本文的主要内容：混合模式滤镜伪类与伪元素波浪效果滚动指示器滚动视差如何学习CSS1. 混合模式mix-blend-modebackg...

背景本人一直对 CSS 很感兴趣，刚好我们团队有一位擅长CSS的大佬：COCO。于是我找到他， 建议做一期关于CSS的分享， 于是就有了《CSS创意构想》。分享的内容很棒，里面有很多技巧， 有的很实用， 有的很华丽。 听完之后， 我觉得十分受用， 就想结合自己的一些理解，再次整理一番， 加深印象， 二次吸收， 所以就有了今...

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

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