「🌟技术探索🌟」借助 CI / CD 实现前端应用的快速回滚

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

「 不懂就问 」webpack 打包的性能瓶颈在哪里 ?

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

「 不懂就问 」esbuild 快在哪里 ?

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

页面白屏了?看看可选链操作符(?.)

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

「 职场感悟 」我们为什么要晋升

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

「 工具篇 」关于 VS Code - 你想知道的都在这里

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

使用 axios 拦截器解决「 前端并发冲突 」 问题

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

「🌟项目实战🌟」优化项目构建时间

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

🤩 对比三个强大的组件文档展示工具

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

Vue Router 10 条高级技巧

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

一种可能比 if-else / switch 更好的方式

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

分享一个提升 Loading 体验的小工具

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

Migrate From Vue-cli to Vite

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

你不知道的 「 import type 」

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

[项目实战] Webpack to Vite, 为开发提速!

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

2020 年终总结

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

「 重磅 」React Server Components

2020-12-24
阅读 5 分钟
14.1k
2020.12.21 号, Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbåge 联合发布了一项 React 新功能:

「 性能优化 」代码分割(下)

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

「 实用推荐」如何时时判断元素是否进入当前视区

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

「 性能优化 」之 代码分割(上)

2020-12-16
阅读 4 分钟
5.6k
现在比较多的项目用的都是webpack4, webpack 4 舍弃了之前的 commonChunkPlugin,增加了 SplitChunksPlugin。

🌟 记一次「 无限滚动 」列表优化

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

🌟 Chrome DevTools 七大新功能

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

聊聊 ESM、Bundle 、Bundleless 、Vite 、Snowpack

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

聊聊 React 两个状态管理库 Redux & Recoil

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

「干货」你需要了解的六种渲染模式

2020-08-02
阅读 5 分钟
11.1k
背景周末在网上冲浪, 看到个消息: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 优化长列表的一个小技巧

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

「 思考 」 React Hooks 的设计哲学

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

[手把手系列] 开发一个 VS Code 业务插件

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

修复一个因为 scrollbar 占据空间导致的 bug

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

CSS 创意构想 - Part 1 / 2

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