真的很上进-优快云博客

原创【1.8w字深入解析】从依赖地狱到依赖天堂：pnpm 如何革新前端包管理？

在现代前端开发中，高效的包管理和依赖治理对于项目的健康发展至关重要。随着项目规模的不断扩大，传统的npm和yarn在处理依赖关系时可能会遇到诸如依赖重复安装磁盘空间浪费依赖版本冲突等问题。而pnpm（performant npm）作为新一代包管理工具，不仅显著提升了安装效率，还为项目依赖治理带来了全新的解决方案。本文将深入探讨pnpm的核心特性及其在实际项目中的应用。包管理工具的发展历程以及pnpm的独特优势产生幽灵依赖的根本原因探究什么是依赖结构的不确定性pnpm的工作原理及其相比npm。

2025-02-17 09:40:28 2273 4

原创告别繁琐的路径配置：带你写一个让 Monorepo 项目模块导入更优雅的 Webpack 插件

今天和大家分享的是如何从零开始写一个实用的Webpack提效插件(完整源码在文章最后).作为前端开发者，我们经常在monorepo项目中遇到一个问题：如何方便地在不同包之间相互引用代码？// 使用路径别名引入// 直接引入其他包为了实现这种引入方式，我们来开发一个插件来自动处理这些路径别名。通过插件的开发，我们可以：自动处理中的路径别名支持使用@monorepo前缀引用其他包不需要手动配置webpack的alias这样可以让我们在monorepo项目中更方便地管理和引用代码。

2025-02-10 16:37:10 1892

原创手把手带你实现MiniESLint：探秘 AST 的前端应用

深入浅出地介绍了 AST（抽象语法树）的概念和应用。通过实现一个简易版的 ESLint 工具，展示了如何使用 Babel 工具链解析、遍历和修改 JavaScript 代码。文章不仅讲解了理论知识，还提供了实战案例，帮助读者理解 AST 在代码转译、检查和优化中的重要作用。对想了解前端编译原理的开发者来说，是一份很好的入门指南。

2025-02-01 23:49:58 1319 1

原创性能优化利器❕ - 深入浅出IntersectionObserver系列

首屏加载动画：当页面加载完成后，逐个触发元素进入视口时添加动画效果，增添页面的过渡效果。注意，在使用动画效果时要注意性能和用户体验，避免过多或复杂的动画效果影响页面加载速度和流畅度。当元素进入视口并与视口的交叉区域达到预设的阈值时，回调函数会被触发。滚动加载动画：当页面滚动到某个特定区域时，触发该区域内的元素添加动画效果，提高用户体验。图片懒加载动画：当图片进入视口时，添加动画效果显示图片，提升页面的视觉吸引力。页面动画当元素进入视口时触发动画效果，为页面增添交互与吸引力。来访问触发动画效果的元素。

2024-12-27 10:08:34 1508 1

原创使用 Webpack 优雅的构建微前端应用❕

Module Federation 是 Webpack 5 新引入的一种远程模块动态加载、运行技术，虽然国内讨论热度较低，但使用简单，功能强大，非常适用于微前端或代码重构迁移场景。使用上，只需引入插件，按要求组织、分割好各个微应用的代码，并正确配置配置项即可实现基于 HTTP(S) 的模块共享功能。此外，我们还可以通过插件的shared配置项实现在应用间共享基础依赖库，还可以通过等一系列配置，精细控制依赖的共享版本与范围。

2024-12-26 10:41:43 1369

原创如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？

本文介绍了 ESLint、TypeScript、Babel 三类工程化工具的历史背景、功能，以及在 Webpack 中接入这些工具的具体步骤。Babel 提供的语言转译能力，能在确保产物兼容性的同时，让我们大胆使用各种新的 ECMAScript 语言特性；TypeScript 提供的类型检查能力，能有效提升应用代码的健壮性；ESLint 提供的风格检查能力，能确保多人协作时的代码一致性。

2024-12-24 09:09:22 1058

原创离谱！学了这么久的前端，还不会GSAP❓❓❓

适用于控制单个元素的属性变化有四种Tween的动画方式- 这是一种最常用的tween动画，就是让元素从初始状态变化到目标状态。- 有点像to方法的逆向变化，就是让元素从目标状态变化到初始状态。- 需要自己定义两个状态的数据，然后从前一个变化到后一个。- 直接设置成想要的状态，没有任何过度与动画效果。

2024-12-23 22:36:10 2072 5

原创 2024年了你还不懂什么是monorepo?五分钟教会你！

Monorepo是一种项目开发与管理的策略模式，它代表"单一代码仓库"（在Monorepo模式中，所有相关的项目和组件都被存储在一个统一的代码仓库中，而不是分散在多个独立的代码仓库中，这些项目之间还可能会有依赖关系。npmyarnpnpm等是用来管理项目依赖、发布包、安装依赖的工具，它们都提供了对工作区（workspace）的支持，允许在单个代码库中管理多个项目或包。这种工作区支持在单个代码库中同时开发、测试和管理多个相关的项目，而无需使用多个独立的代码仓库。这些包管理工具与monorepo。

2024-12-17 22:15:53 3991

原创 Webpack前端工程化进阶系列(二) —— HMR热模块更新(图文+代码)

之前更新过一篇Webpack，没想到颇受好评，很快就阅读量就破万了hhh，应读者私信的要求，决定继续更新Webpack进阶系列的文章！进入今天的主题 ——HMR。

2024-11-26 13:35:46 1041

原创 Webpack前端工程化进阶系列(一) —— SourceMap(图文+代码)

之前更新过一篇Webpack，没想到颇受好评，很快就阅读量就破万了hhh，应读者私信的要求，决定继续更新Webpack进阶系列的文章！进入今天的主题～开发时我们运行的代码是经过webpack编译后的，所有css和js合并成了一个文件，并且多了其他代码。此时如果代码运行出错，那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。所以我们就需要想办法去用加准确的错误提示，来帮助我们更好的开发代码,所以这个时候就需要用到SourceMap。

2024-11-25 20:00:54 1044

原创 ⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand

Zustand 是一个为 React 设计的状态管理库，它有两大优势：既简单易用，又无比强大。它提供了一个最小化的 API 来管理你的应用状态，使你的代码更易于维护，也更容易理解。用最少的样板代码创建一个全局状态。无需复杂的提供者或上下文设置就能访问和更新状态。在组件中使用状态，无需将其包装在 hooks 或 props 中。从不可变状态更新模型中受益。保持你的代码库整洁和可维护性。让我们通过一些代码示例来看看 Zustand 是如何工作的～

2024-11-13 17:32:20 1287 2

原创冲击大厂必会的前端工程化初探 - 埋点与性能监控SDK

只有了解用户，我们才能服务好用户，而最接近用户的我们，自然要承担起更多的责任。那么在一个企业中，我们要如何去了解用户呢？最直接有效的方式就是了解用户的行为，了解用户在网站中做了什么，呆了多久。而如何去实现这一操作，这就涉及到我们前端的埋点了。在聊如何进行埋点前，我们先介绍下什么是埋点？所谓'埋点'是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数观看某个视频的时长等等。基于此我们可以知道。

2024-11-07 11:02:24 1136 2

原创 ⚡前端最火框架 —— Next.js 中各种渲染方式的作用及区别（SSG、SSR、ISR、CSR）

最近在做Next项目的时候使用Next.js的预渲染API时踩了一些坑，各种数据获取和传入的API看的眼花缭乱，它们具体的作用和表现对我来说是一个黑盒。因此，我认真的看了Nextjs的官方文档中渲染部分的介绍并结合自己的实践进行了总结。在Next.js中想要使用某种渲染方式，例如我想指定SSR或是SSG，并不是说直接在某个配置文件中改一个配置就可以的，而是我们在页面中使用了一些相关的API，而Next.js在打包时检测到了才会进行相应的页面构建策略。如果你对于Next.js。

2024-10-26 01:33:53 1847 1

原创不要再混淆啦！一文带你学会原型链继承、构造函数继承、寄生组合继承、ES6继承

js有几种经典的继承方式。比如原型链继承构造函数继承组合继承寄生组合继承ES6继承。让我们一一分析并实现。同时了解每种方案的优缺点。其实js的继承本质上是通过原型链机制实现的扩展。不管是哪种继承方式，都是通过关系实现的。只是不同实现中需要考虑不同的问题。在实际项目开发中，建议尽可能使用ES6的实现。其他实现方式主要是理解背后的原理和思想。

2024-09-26 11:35:30 982

原创【mac开发入坑指南】能让你的终端好用一万倍的神仙组合iTerm2 + oh-my-zsh

iTe·rm2iTerm2是默认终端的替代品，也是目前Mac系统下最好用的终端工具，集颜值和效率于一身。Oh-My-ZshOh My Zsh 是一款社区驱动的命令行工具，正如它的主页上说的，Oh My Zsh 是一种生活方式。它基于Zsh 命令行，提供了主题配置，插件机制，已经内置的便捷操作。它能让你用了直呼：“Oh My ZSH!” 🤣👏（它官网的确是这么说的哈哈哈哈）非常好看的终端提高效率的插件：代码高亮、自动补全、快速路径跳转、Git命令快捷键快去试试吧😎。

2024-09-26 00:10:39 1101

原创【Git必看系列】—— Git巨好用的神器之git stash篇

上面命令会将所有已提交到暂存区，以及没有提交的修改，都进行内部保存，没有将工作区恢复到上一次。使用下面的命令，取回内部保存的变化，它会与当前工作区的代码合并。分支下吭哧吭哧的开始写代码开发新功能，就如下代码所示，我们在。首先我们新功能的代码还没开发完成，其次新功能这里还有一些。运行该命令后，所有没有。这时，如果与当前工作区的代码有冲突，需要手动调整。，我们应该放下手头上新功能的开发工作先将。分支提交新功能的代码，然后再切换到。没解决，就这样把有问题的代码提交到。

2024-09-21 20:31:09 561

原创前端速通面经八股系列(九）—— 全网最全的js输出代码题篇

代码输出结果是面试中常考的题目，一段代码中可能涉及到很多的知识点，这就考察到了应聘者的基础能力。异步编程、事件循环、this指向、作用域、变量提升、闭包、原型、继承等，这些知识点往往不是单独出现的，而是在同一段代码中包含多个知识点。所以，笔者将这些问题大致分为四类进行讨论。这里不会系统的阐述基础知识，而是通过面试例题的形式，来讲述每个题目的知识点以及代码的执行过程。如果会了这些例题，在前端面试中多数代码输出问题就可以轻而易举的解决了。

2024-09-21 19:37:57 1282

原创【Git必看系列】—— 2024年前后端开发必须要知道的GitFlow工作流

`GitFlow` 是一种 `Git` 工作流，这个工作流程围绕着项目的发布(`release`)定义了一个严格的如何建立分支的模型。它是团队成员遵守的一种代码管理方案。`Git`建分支是非常容易的，我们可以任意建立分支，对任意分支再分支，分支开发完后再合并。比较推荐、也比较常见的做法是功能（特性）驱动(`Feature Driven`)的建立分支法(`Feature Branch Workflow`)。简而言之，就是每一个功能(`feature`)的开发并不直接在主干上开发，而是在`单独的分支`

2024-09-20 17:53:39 1187 1

原创浅浅探究一下React的虚拟DOM和diff算法

通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。

2024-09-12 21:57:49 1068

原创一文带你看懂状态管理库Redux原理

react-redux 数据传输∶ view–>action–>reducer–>store–>view。view 上的AddClick 事件通过mapDispatchToProps 把数据传到action —> click:()=>dispatch(ADD)action 的ADD 传到reducer上reducer传到store上 const store = createStore(reducer);

2024-09-12 21:55:06 1468

原创前端速通面经八股系列(八）—— React篇(上)

（1）受控组件在使用表单来收集用户输入时，例如等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方式消除了组件的局部状态，使整个状态可控。react官方推荐使用受控表单组件。可以通过初始state中设置表单的默认值每当表单的值发生变化时，调用onChange事件处理器。

2024-09-09 21:50:47 1644

原创都2024年了，不会有人还没用过createObjectURL这个如此好用的API吧

都2024年了，不会还有人还没用过URL.createObjectURL这个api吧，还不赶紧学习一下它的语法和应用场景！

2024-09-09 16:29:14 1801

原创 vue-awesome-swiper踩坑指南 —— 全面避坑帖

最近由于业务接触到这个轮播组件，但发现容易踩的坑还是挺多的,总结一下最常见的坑。

2024-09-09 10:21:14 993

原创 TypeScript数据结构与算法系列(二) —— 栈

栈（stack）是一种遵循先入后出逻辑的线性数据结构。我们可以将栈类比为桌面上的一摞盘子，如果想取出底部的盘子，则需要先将上面的盘子依次移走。我们将盘子替换为各种类型的元素（如整数、字符、对象等），就得到了栈这种数据结构。如图所示，我们把堆叠元素的顶部称为“栈顶”，底部称为“栈底将把元素添加到栈顶的操作叫作“入栈”，删除栈顶元素的操作叫作“出栈。

2024-09-08 02:03:20 498

原创学不会虚拟列表?10分钟带你实现高度固定的Vue虚拟列表方案及原理

在传统的列表渲染中，如果列表数据过多一次性渲染所有数据将耗费大量的时间和内存。当我们上下滚动时，性能低的浏览器或电脑都会感觉到非常的卡，这对用户的体验时是致命的。于是我们会想到懒加载，当资源到达可视窗口内时，继续向服务器发送请求获取接下来的资源，不过当获取的资源越来越多时，此时浏览器不断重绘与重排，这样的开销也是要考虑的当数量多到一定程度时，页面也会出现卡顿。此时我们会想到虚拟列表，虚拟列表只渲染当前可见的部分数据，随着滚动条的滚动，只渲染当前可见的列表项，从而大大减少了渲染时间。同时。

2024-09-07 01:39:41 2583 2

原创 TypeScript数据结构与算法系列(一) —— 链表

在一个复杂的系统运行环境下，空闲的内存空间可能散落在内存各处。我们知道，存储数组的内存空间必须是连续的，而当数组非常大时，内存可能无法提供如此大的连续空间。此时链表的灵活性优势就体现出来了。是一种线性数据结构，其中的，各个节点通过“引用”相连接。引用记录了下一个节点的内存地址，通过它可以从当前节点访问到下一个节点。链表的设计使得各个节点可以分散存储在内存各处，它们的内存地址无须连续。观察图例，链表的组成单位是节点（node）对象。

2024-09-06 15:46:24 1181 1

原创不知道new之后到底发生了什么？带你手写new实例化过程源码

手写new实例化的过程，利用__proto__绑定构造函数的原型对象，利用apply来让this只想创建的空对象并执行构造函数

2024-09-06 14:49:30 367

原创 React组件通信详解

即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。：父组件通过 props 向子组件传递需要的信息。：: props+回调的方式。

2024-09-05 22:43:38 1469

原创一文带你看懂React生命周期和性能优化

在老版本的 React 中，如果组件自身的某个 state 跟其 props 密切相关的话，一直都没有一种很优雅的处理方式去更新 state，而是需要在 componentWilReceiveProps 中判断前后两个 props 是否相同，如果不同再将新的 props更新到相应的 state 上去。但是，有的时候子组件的接受父组件的数据没有变动。需要注意，在进行新旧对比的时候，是**浅对比，**也就是说如果比较的数据时引用数据类型，只要数据的引用的地址没变，即使内容变了，也会被判定为true。

2024-09-04 23:35:44 2591

原创前端面经之边距折叠——三种触发情况及解决方案

当父元素的padding-top和border-top属性值为0时，就会导致父元素的上外边距与其第一个子元素的上外边距直接接触，从而导致两个外边距的折叠，效果上就像是子元素的上外边距被挤到父元素之外；同理，当父元素的padding-bottom和border-bottom属性值为0时，就会导致父元素的下外边距与其最后一个子元素的下外边距直接接触，从而导致外边距折叠。

2024-09-03 21:30:40 830

原创详解React setState调用原理和批量更新的过程

假如所有setState是同步的，意味着每执行一次setState时（有可能一个同步代码中，多次setState），都重新vnode diff + dom修改，这对性能来说是极为不好的。setState 并不是单纯同步/异步的，它的表现会因调用场景的不同而不同。在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发调和过程(Reconciliation)。React会将state的改变压入栈中，在合适的时机，批量更新state和视图，达到提高性能的效果。

2024-09-03 21:00:35 1669 1

空空如也

空空如也