大前端

3

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

皮小蛋 5月28日发布
2 收藏

背景上一篇文章我们分析了：为什么 esbuild 这么快。还有数据对比：可以看到： esbuild 一骑绝尘, 以绝对优势领先。但是看看最下面, 赫然是我们最熟悉的 webpack。那么, webpack 的构建为什么慢呢？到底慢在哪呢...

6

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

皮小蛋 5月27日发布
3 收藏

前言esbuild 是新一代的 JavaScript 打包工具。他的作者是 Figma 的 CTO - Evan Wallace。esbuild以速度快而著称，耗时只有 webpack 的 2% ～3%。esbuild 项目主要目标是: 开辟一个构建工具性能的新时代，创建一...

15

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

皮小蛋 5月19日发布
11 收藏

背景今天又被 QA 找: 这个页面昨天还好好的, 今天就白屏了, 是不是你代码有问题啊, 赶紧看看。上去一看，找到了原因：原本 pickup, dropoff 两个字段没有数据的话，应该返回{}, 结果现在pickup字段返回了null, ...

6

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

皮小蛋 5月14日发布
3 收藏

前言这几天心里颇不宁静。想的事情比较多，没有一个是关于技术的。今天和大家聊聊一个我们都很关心的话题：晋升。下午拉了个会，和我几个下属聊了一下这个话题，自己也有一些新的感受。在这里记录一下，顺便...

18

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

皮小蛋 5月6日发布
11 收藏

背景之前部门想要统一代码编辑器，最后决定统一用 VS Code。我之前也有写这篇文章的想法，于是就主动报了名。所以就有了今天这篇，一篇详细介绍 VS Code 的文章。中间参考了不少资料，如有错误，欢迎留言指出 :)...

26

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

皮小蛋 5月6日发布
18 收藏

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

11

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

皮小蛋 5月1日发布
3 收藏

背景前几天晚上下班的时候，路过隔壁项目组，听他们在聊项目构建的事：现在线上打包时间太长了，修个 bug 1 分钟，发布一下半小时, 贼难受。他们项目比较庞大，线上构建时间特别长，基本都在15分钟以上。和...

21

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

皮小蛋 4月29日发布
14 收藏

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

60

Vue Router 10 条高级技巧

皮小蛋 4月28日发布
38 收藏

前言Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过...

4

🤔️ 什么，项目构建时内存溢出了？了解一下 node 内存限制

皮小蛋 4月22日发布
1 收藏

背景在之前的一篇文章中，我们遇到了一个项目在构建时内存溢出的问题。当时的解决方案是: 直接调大 node 的内存限制，避免达到内存上限。今天听同事分享了一个新方法，觉得不错，特此记录，顺便分享给大家, 希...

3

你可能不知道的「 CSS 容器查询」

皮小蛋 4月21日发布
2 收藏

背景今天PM过来问我: 蛋总，有些用户反馈他们屏幕太小了，需要滑动，操作不方便。我们的系统能不能改成自适应布局啊?我顿时虎躯一震：woc, 要把一个迭代了一年多的固定设计的产品，改成自适应布局? 真让人害怕...

4

「开发提效」从页面直接打开代码文件

皮小蛋 4月19日发布
4 收藏

背景在平时的开发中，快速定位需求所在的代码文件，是十分常见的需求。一般来说，常见的定位源码的方式有：搜索页面关键字页面路由Devtool 中的组件名好的记忆力 🤪这些方式往往效率都不是很高，而且可能需要很长...

11

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

皮小蛋 4月16日发布
5 收藏

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

24

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

皮小蛋 4月13日发布
15 收藏

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

8

Migrate From Vue-cli to Vite

皮小蛋 4月10日发布
5 收藏

背景我最近将一些 Vue2 项目从 vue-cli(webpack)迁移到了 vite。在第三次这样做之后，我对迁移过程做了一些详细的记录，并将在这篇文章中进行总结。文章目录：package.jsonindex.htmlvite.config.js测试用例Lint...

7

你不知道的「 import type 」

皮小蛋 4月9日发布
4 收藏

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

35

[项目实战] Webpack to Vite，为开发提速！

皮小蛋 4月8日发布
23 收藏

背景最近，就前端开发过程中的痛点及可优化项做了一次收集。其中，构建耗时、项目编译速度慢的字眼出现了好几次。随着业务的快速发展，我们很多项目的体积也快速膨胀。随之而来的，就是打包变慢等问题。提...

18

2020 年终总结

皮小蛋 2020-12-31 发布
4 收藏

前言2020，过的真快。在这一年里，发生了很多事情。虽然有一些小的成就，也有很多遗憾。正文全年回顾今年主要做了什么呢？简单列一下：完成了业务系统的一次大重构。做了技术升级，接入了新的 UI/UX，完成了...

15

「重磅」React Server Components

皮小蛋 2020-12-24 发布
6 收藏

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

7

「性能优化」代码分割（下）

皮小蛋 2020-12-21 发布
5 收藏

背景本文接上篇：上文中，我们了解了 chunks 三个字段的含义，以及每个字段对应的行为。今天是实践篇。修改短短几行配置，就达到了数百毫秒的优化效果。正文我的这个项目，迭代一年多了，中间打包配置也没...