frontend_frank-优快云博客

原创揭秘webpack插件工作流程和原理

前言通过插件我们可以扩展webpack，在合适的时机通过Webpack提供的 API 改变输出结果，使webpack可以执行更广泛的任务，拥有更强的构建能力。本文将尝试探索 webpa...

2020-05-18 01:20:45 6139 4

转载 OpenTiny NEXT 内核新生：生成式UI × MCP，重塑前端交互新范式！

当前市面上的MCP服务都是后端服务，但是如果用户的后端服务Api想要改造成大模型可以理解的MCP服务，成本是非常高的，我们用这种逆向思维把MCP Server放在前端，这样用户是不需要对已有的后端Api进行改动，已有的业务逻辑如果已经封装成前端的Api，则可以直接注册成MCP Tool，前端的工具方法或者业务方法放在MCP Tool的回调里就完成了向AI提供工具的实现。然而现有的企业应用（另外，它还提供动态生成二维码功能，让企业应用里的 MCP 服务成为 AI 对话框里可以让 Agent 调用的工具。

2025-09-18 10:00:59 71

转载一文了解Web的可访问性

例如，一个自定义菜单可以通过监听键盘事件，根据用户按下的方向键来切换菜单项的选中状态，按下 Enter 键来执行相应的操作。键盘导航是 Web 可访问性的重要组成部分，它允许用户仅使用键盘来浏览和操作网页，这对于那些无法使用鼠标或其他指针设备的用户（如肢体残障人士、键盘快捷方式偏好者）来说至关重要。如果你的应用用户人群是这些国家的，就需要特别关注开发中的可访问性。：在页面顶部添加一个隐藏的链接，当用户使用键盘将焦点移动到该链接时，链接显示出来，用户按下 Enter 键可以直接跳转到页面的主要内容区域。

2025-09-16 09:41:56 103

转载 2025年上半年前端技术圈生态总结

AI 时代已经到来，不管是技术还是其它行业，AI 每天在不断的迭代发展，辐射到各个行业，提升效率，提升质量。构建生态向更高效的 bundler 和服务器渲染转移，Vue 和 React 的更新强调性能和类型安全，但实际项目中迁移成本较高。减少了运行时错误，提高了团队协作效率，尤其在大项目中。，更多的是生成一堆冗余的代码，还需要大量手动优化等，不过整体上提升了很大的效率。

2025-09-11 09:29:06 75

转载面试官：说说你对贪心算法、回溯算法的理解？应用场景？

但是如果你手上钱币的面额为1、3、4，想要兑换6元，按照贪心算法的思路，我们会 6 = 4 + 1 + 1这样选择，这种情况结果就不是最优的选择。如果现在你要兑换11元，按照贪心算法的思想，先选择面额最大的5元钱币进行兑换，那么就得到11 = 5 + 5 + 1 的选择，这种情况是最优的。贪心选择：当某一个问题的整体最优解可通过一系列局部的最优解的选择达到，并且每次做出的选择可以依赖以前做出的选择，但不需要依赖后面需要做出的选择。在这些的路里面，有死路也有生路，思路即不符合题目要求的路，生路则符合。

2025-09-10 09:42:20 43

转载面试官：说说微信小程序的实现原理？

每次冷启动时，都会检查是否有更新版本，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。异步会使得各部分的运行时序变得复杂一些，比如在渲染首屏的时候，逻辑层与渲染层会同时开始初始化工作，但是渲染层需要有逻辑层的数据才能把界面渲染出来。由于小程序是基于双线程的，也就是任何在视图层和逻辑层之间的数据传递都是线程间的通信，会有一定的延时，因此在小程序中，页面更新成了异步操作。在逻辑层发生数据变更的时候，通过宿主环境提供的。

2025-09-09 15:29:41 46

转载有效减少页面卡顿的几种实操

页面卡顿是前端开发中常见的问题，会直接影响用户体验。本文将介绍几种实用的优化技巧，帮助你打造流畅的网页体验。页面卡顿是前端开发中常见的问题，会直接影响用户体验。本文将介绍几种实用的优化技巧，帮助你打造流畅的网页体验。持续监控和优化是保持页面流畅的关键。通过实施上述策略，你可以显著提升用户体验，创建出更加流畅响应的网页应用。使用React、Vue等框架的虚拟DOM机制，最小化实际DOM操作。批量修改样式：使用class而不是直接修改style。优化JavaScript执行，避免阻塞主线程。

2025-09-08 09:57:50 93

转载 Vue 3.6 重磅预览：Vapor Mode 是如何让性能起飞的？

简单来说，Vapor Mode 是一种新的编译模式，它在编译时就消除了运行时的大部分开销。Vue 3.6 就像一个能根据情况使用不同引擎的混合动力汽车，既能保留 Vue 3 强大的开发体验，又能带来媲美甚至超越原生 JS 的运行速度。它不会取代现有的 Vue 3 模式，而是作为一种强大的补充，让开发者可以根据具体需求，在易用性和极致性能之间做出最佳选择。你想换个窗帘，需要先画一张新窗帘的草图 (Virtual DOM)，然后把新旧草图比较一下，找出不同，最后再告诉工人去换。，它旨在提供极致的性能。

2025-09-03 10:02:54 54

转载 Chrome 全新 API：仅 6 行 HTML！让页面秒开！

把等待时间从「用户侧」转移到「浏览器空闲时间」，这就是 Speculation Rules API 的全部魔法。动画”时，直接把这篇文章甩给他 —— 然后优雅地附上那。立刻启用 moderate 级别的 prerender。用 prefetch，别 prerender。浏览器会自动扫描当前页面所有链接，当用户。在后台完整跑完页面（脚本、API 全跑）重点捕捞：prerender 高价值路径。，就能让页面“看起来比用户还懂用户”。悬停或聚焦再干（默认，最均衡）🔑 核心原理：让浏览器做“预测”

2025-09-02 09:42:27 43

转载出海必备的 8 个开源 SaaS 项目！

涉及 UI 组件库、Landing Page 模板、SaaS 模板（接入用户认证、支付、数据库等）、Shadcn 扩展、Shadcn 工具等。近期 Shadcn UI 作者还发布了一个功能强大的 Sidebar 组件，有了这个组件，我们就能方便地根据需求自定义 Sidebar 了。Shadcn UI 和 Next.js 的结合为快速开发出海 SaaS 或 Landing Page 项目提供了强大的解决方案。是一个现代化的 React 组件库，为开发者提供了一套高度可定制、可访问性强的 UI 组件。

2025-09-01 10:48:50 114

转载 Node.js 面试必问的 stream，你能答出多少？

比如 fs.createReadStream、http 的 request 是 Readable 的实现，fs.createWriteStream、http 的 response 是 Writable 的实现，net 的 Socket 是 Duplex 的实现，zlib.createGzip 是 Transform 的实现。* 和 yield 是 js 的 generator 的语法，它是异步返回 yield 后的内容，通过 iterator 的 next 来取下一个。

2025-08-28 10:37:22 67

转载腾讯文档智能表格渲染层 Feature 设计

addActivedEvents：绑定事件的钩子，比如选区会监听鼠标 wheel 事件，但需要在选区绘制之后才监听，避免没有选区就去监听带来不必要的浪费。使用 Mobx 改造之后，避免了直接获取 Feature 内部的数据，或者调用 Feature 暴露的修改 UI 方法，让整体流程更加清晰直观了。因此，我们提倡使用插件化的形式来开发，每个 Feature 都是一个插件类，它拥有自己的生命周期，包括。出于性能的考虑，这里采用了双层 Canvas 的形式，将频繁变化的内容和不常变化的内容进行了分层。

2025-08-12 08:41:24 77

转载 Vue3封装一个超级好用的 Hook

在 16.8 的版本中，React 引入了 React Hook，通过封装有状态的函数，提高了组件的编写效率和可维护性，在后面统一使用 Hook 来替代“组合式函数”。Hook 接受一个 API 函数和一个选项对象，其中选项对象可以包含路径信息和是否立即刷新数据的标志。Hook 允许我们将逻辑封装为可复用的函数，这些函数可以让你在组件之外管理状态和逻辑，从而在多个组件之间共享和复用。支持分页查询，我们需要对 API 进行改造，使其能够接受分页参数并返回分页数据。Hook 的返回值来控制分页和数据加载。

2025-08-11 17:50:36 70

转载 nodeJS 中 TCP 连接的实现与核心架构解析

当客户端请求通过网卡传递过来，对应的监听型 socket 发生状态变更，事件循环模块根据命中之前设置的可读事件，将 onconnection 回调插入 poll io 阶段的任务队列，当新一轮的事件循环到达 poll io 时执行回调，调用 accept 方法创建与客户端的通信型 socket，此时进入进程阻塞，经过三次握手后，建立与客户端的连接，将用户 JS 的回调插入 poll io 的任务队列，在新一轮的事件循环中进行数据的处理。Local 是局部的，它同时被 HandleScope 进行管理。

2025-08-08 08:00:57 112

转载一行命令搞定前端部署

如果你懒得用命令行，直接打开这个网页也行 👉 https://pinme.eth.limo/如果你觉得 GitHub Pages 太复杂，Netlify 太贵，Vercel 太慢...打开编辑器，写完页面，运行一行命令——你的网站，就上线了。就这么简单，不用再管什么服务器、CDN、SSL、限流……👩‍💻 前端新手 / 学生党：刚写完项目，想马上发出去。命令敲完几秒钟后，你就能获得一个属于你的网站链接。各种平台限速、断线，还得注册一堆账号……也许你只是想搭个简单页面，介绍自己；

2025-08-07 20:30:11 44

转载 DDD在大众点评交易系统演进中的应用

在我们的实际落地过程中，为了实现在多业务之间进行最大化复用的目标，我们在平台领域模型的构建上做了进一步的提炼，将平台领域模型拆解为基础领域模型，以及预订业务模型、团购业务模型等按照业务形态划分的领域模型。这个阶段是我们业务和系统起步的阶段，当时我们只支持了预订形态的一两个品类的交易，整体上相对比较简单，同时我们当时团队的规模也很小，为了快速支持业务上从0到1这个过程中不断的探索和试错，我们在技术系统建设的主要思路是按照业务环节对业务功能模块做了一些简单的划分，从而做到能够快速的迭代和交付。

2025-08-05 09:41:53 68

转载推荐一个“复制即用”的前端动画组件库，支持react,vue

目前已经实现了 40 多个组件，正在逐步补齐 React 端的完整功能，未来甚至还会加入 Vue 专属的动画方案。同样的使用体验，同样的炫酷视觉，现在不仅 React 开发者能用，Vue 社区也终于迎来了这套动效组件的完整体验！：不需要配置、不用掌握复杂的动画库，复制几行代码，直接贴进项目里，页面立马有动效，还挺高级的。无论你用的是 Vue 还是 React，现在都能拥有一套好用、好看、不费脑子的动效组件。做个人作品集、H5 页面、营销页的时候，不妨试试，真挺省事的。的前端动画组件库在圈子里悄悄火了起来。

2025-07-30 09:23:52 364

转载 CSS 2020-2025：六年演进与革新全景图

Popover API 与锚点定位结合，提供了声明式的弹出层和定位系统，减少了复杂交互组件的 JavaScript 依赖，同时保证了更好的可访问性。解决了新添加元素初始动画的问题，确保过渡效果从预期的起始状态开始，提升了动态 UI 的视觉体验，尤其是对于模态框和动态加载的内容。等数学函数的加入，使 CSS 的计算能力更加强大，支持更复杂的布局和样式逻辑，减少对 JavaScript 的依赖。选择器填补了 CSS 中"父选择器"的空白，为条件样式提供了强大支持，减少了对 JavaScript 的依赖。

2025-07-29 15:06:47 116

转载通过代码示例学习 HTTP 方法

例如，如果你不小心使用 GET 来删除资源，可能会有人通过点击链接或刷新页面来删除它，这样做是不安全的。例如，在电子商务平台中，用户可能会经常更新他们的送货地址或支付方式，PATCH 能够处理这些频繁的变化，而无需重新发送整个用户资料。例如，要删除一个特定的博客文章，可以向该文章的 URL 发送 DELETE 请求，服务器将负责将其删除。然而，大多数情况下使用的是“硬删除”，即完全擦除资源。当你发送一个 HEAD 请求时，服务器会回应与 GET 请求相同的头信息，但不发送资源主体（如文本、图片或文件）。

2025-07-28 14:29:56 123

转载 IM客服工作台的实践总结

上面提到第三屏需要提供解决问题的相关信息，但这些信息需要和进线的用户相关，比如用户信息、用户进线时咨询的订单或商品、用户命中的售后单或工单等。），其中第一屏展示客服的部分重要服务指标（满意度、首解率和接待量）、客服基本信息（昵称/头像/状态/时长）、当前会话和历史会话列表，第二屏为具体某个会话的聊天内容，而图中的右侧为当前会话对应的所有重要信息（后面统称。作为服务客服的产研团队，我们希望能提供更利于客服操作的系统，其中操作费力度就是我们参考的重要指标，基于此目标，也在不断的迭代和升级产品。

2025-07-25 09:42:46 92

转载留给初中阶程序员的时间不多了

诚然能长期 Focus 在一个自己感兴趣的领域里是一件很幸运的事情，但在这个大变革时代，这并不是普通打工人所能把控的，因此我更建议工程师们可以打开自己的边界，放下“角色”预设，接纳一切合理不合理的变化，然后在新的角色里借助 AI 工具做好商业产出，不要一味“绑死”在某个技术角色里白白失去职业上升机会。这一轮生成式 AI 革命，要比过去所有计算机技术革命都来得快、来得猛，从 ChatGPT 3.5 开始，到 Gemini，到 Claude，模型一个比一个强，迭代一个比一个快，说是“瞬息万变”都不为过。

2025-07-24 08:30:24 75

转载 Vue 抛弃虚拟 DOM，底层到底换成啥了？怎么更新 DOM？

为了改善这个问题，React 最早提出了“虚拟 DOM”的概念：用 JavaScript 在内存中模拟出一棵 DOM 树，当状态发生变化时，先更新虚拟 DOM，然后通过 diff 算法找出差异，最后再“精确地”更新真实 DOM。它试图用更轻量、更贴近原生 DOM 的方式，取代我们熟悉的虚拟 DOM，从而进一步释放 Vue 的性能潜力。不再构建虚拟 DOM，也不再 diff 树，而是在编译阶段就把模板转成“操作真实 DOM 的代码”。也就是说，一旦数据变化，只会触发该数据相关的 DOM 更新逻辑。

2025-07-22 10:05:57 129

转载五年前端的面试之旅

跟HR打招呼的时候，尽量不要用那种默认沟通模版如：“打扰了，希望和你聊聊这个职业，是否方便”，而是把你的核心竞争力告诉对方，比如你有多少年开发经验，擅长什么技术栈，有什么优势等等，有博客的同学也可以附上博客链接等等。每次面试都是一次宝贵的经验。它有一个很nice的功能点，就是会根据你的提问衍生新的问题，关联度极高，这就好比面试官在问我们一个是知识点的时候，经常会变出一些新问题！如果是比较钟意的公司，你可以尝试二次沟通，但是需要对该公司的招聘JD进行了解，比如JD上面有哪些技术刚好是你擅长或突出的。

2025-07-16 08:02:21 42

转载 FlutterWeb启动耗时优化

延迟组件中的代码不会影响其他平台，其他平台在初始安装时会正常构建包含所有延迟组件和资源的应用。，按照官网的步骤进行了分包处理发现编译是成功的，但是最终并没有实现分包。这说明如果业务比较复杂页面很多的情况下，我们可以根据自己的需求和体验细化项目的结构，将。端网页对比，还是明显感觉到性能上的差异，特别是启动的过程明显耗时较长。于众所周知的原因，访问这两个地址将会比较慢，在有些时候甚至会访问失败。会根据不同的浏览器环境，和不同的语言环境加载不同的字体。即可达成分包的目的。但在写上一篇文章的时候，我们用的是。

2025-07-15 09:13:38 182

转载 TypeScript 之痛，为啥很多人会用成 anyScript

TypeScript 作为类型约束的语言，在套在强调类型灵活性的 JavaScript 上时，在实际的使用过程中是有非常多的镇痛的，甚至有很多即使用了类型体操都无法解决的问题，因为他们从底层本质上来说，确实有许多无法统一的逻辑和场景。当然，这是一方面，另外一方面，你会发现，一个简单的场景，为了解决类型问题，你又多花了大量的时间。支持的 key 值是任意类型，value 的类型也不确定，因此，我的本能反应，就是使用 any 来约定类型，然后再加一个指向下一个节点的指针。

2025-07-14 09:20:38 8

转载浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

而锚点定位的属性的核心作用就是，能够改变元素定位的基准，增强元素的绝对定位的能力。仔细观察，和上面利用 Javascript 库实现的智能定位，效果一致，只是此时，我们仅仅使用了寥寥几行 CSS 代码！简单而言，我们利用锚点定位的能力，在 hover 按钮 A\B 的时候，把 C 元素定位在它们正下方。如果还有什么疑问或者建议，可以在评论区多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。为了避免这种情况的发生，一般情况下，常见的解决方案都是会将弹出层的 DOM，插入到页面最外层的。

2025-07-09 17:13:16 99

转载 Redis学习-前端入门篇

redis锁可以处理并发问题,redis数据类型中有一个set类型，set类型在存储数据的时候是无序的，而且每个值是不一样的，不能重复，这样就可以快速的查找元素中某个值是否存在，精确的进行增加删除操作。set类型中提供了无序的方式来存储多个不同的元素，set类型中每个元素的值都不一样，用户可以快速对元素中的值添加删除，检查某些值是否存在，重复的元素是无法继续插入集合的。从链表的两端推入或者弹出元素；list类型是一个有序的列表，有序表示的是从左到右还是从右到左，而且数据内容是可以重复的。

2025-07-08 14:27:26 39

转载 AI 编程时代，我仍离不开的 VSCode 插件清单（2025 版）

当你在代码中犯错时，这个插件会在你出错的那一行直接显示错误信息，而不仅仅是底部的状态栏。比如有同事托管 AI 写完代码，没仔细检查，结果误改了别人负责的模块，事后还说“我没动过”。安装GitLens 插件之后在每行代码的末尾，GitLens 都会公开最后一次提交的作者、提交的时间以及其他详细的备注信息。但即便如此，有一些 VSCode 插件我依然每天在用，它们不是用来替代我写代码的，而是。如果你也是一位和 AI 并肩写代码的开发者，不妨试试这些插件，或许能看代码能更舒适。作用：自动补全文件路径。

2025-07-07 10:21:51 342

转载阿里、蚂蚁、腾讯纷纷推出 AI 组件库，React / Vue 全覆盖，AI 组件库超全汇总来啦！

Element Plus X 是对标 Ant Design X 的 Vue 版本实现，是一个遵循 Element Plus 设计语言的 Vue 3 AI 组件库。随着 AI 技术的快速发展，阿里、蚂蚁、腾讯都相继发布了各自的 AI 组件库。本文就来盘点常见的 AI 组件库！它根据 Ant Design 的设计规范制作，是一个React的UI库，可以快速连接智能对话组件和 API 服务。Ant Design X Vue 是基于 Vue.js 的 AI 组件库，目标是简化与 AI 集成的开发过程。

2025-04-22 14:05:08 458

转载连续霸榜多年，前端构建工具王座即将易主！

按现在的增长速度，也许两周后，Vite 的下载量就能超过 Webpack，成为构建工具中的。• ❌ Firebase Studio：即使提示“用 Vite”，默认还是 Next，也能选 Vite。：默认用 Vite，支持混合 Vue、React、Svelte 等组件，用按需编译加快构建。：留存率 98.4%，关注度 81.7%，使用率 50%，获“最受欢迎技术”奖。：React 官方推荐初学者使用 Vite，目前社区里很多人都在用 Vite。：Vite 首次出现，满意度 98%，使用率 30%。

2025-04-21 10:52:43 127

转载 8 个面向前端方向的 AI 编程助手，总有一款适合你！

IBM Watsonx™ Code Assistant 是一款由 IBM 提供的生成式 AI 工具，旨在通过自动化和 AI 辅助代码生成来提升开发者的生产力，特别是对于企业级的应用的开发和维护。Vercels的 AI 团队创建的一款前卫的 AI 助手，专门针对前端开发人员，主要关注：React、Next.js App Router 和现代 Web 开发实践。同时，它还能够帮助我们在管理技术债务较高或文档不完善的老旧系统时，通过自动化代码转换和运行时优化，减少开发过程中的风险和成本。

2025-04-16 11:02:27 2018

转载基于three.js的虚拟人阴影渲染优化方案

从上面的预览图可以看出，对于 BasicShadowMap 和 PCFShadowMap，阴影的边缘有比较多的锯齿，而对于 PCFSoftShadowMap，除了有更多的性能开销之外，人物在动的时候边缘也会有明显的闪烁的情况出现，而且边缘模糊半径过大导致阴影的效果并不明显。此方案在每帧画面渲染之前都要再额外先把地面阴影的场景渲染出来，所以会增加额外的性能开销，由于地面阴影的边缘经过模糊平滑的处理，所以分辨率并不需要太高，贴图尺寸设置为64*64即可，有效的控制地面阴影带来的性能损失。

2025-04-10 15:09:20 87

转载边缘计算与前端性能优化

千方科技在智慧景区解决方案中，通过边缘计算节点实时处理游客行为数据（如视频流分析、路径预测），并结合前端动态渲染技术，生成个性化推荐内容（如景点导览、优惠信息），显著提升用户交互体验。边缘计算通过将数据处理和存储功能从云端迁移至靠近用户的边缘节点（如CDN节点、基站或本地服务器），实现低延迟、高带宽和高可用性。结合边缘计算与WebRTC技术，教育平台在边缘节点处理音视频流，减少客户端计算负担，实现低延迟的课堂互动（如白板协作、实时问答）。：边缘节点的分布式特性可能增加攻击面，需强化数据加密与权限管理。

2025-04-02 14:27:01 179

转载从搭建到二开TinyEngine低代码引擎

通过这一趟实践旅程，我们不仅让 TinyEngine 在本地顺利运行起来，更重要的是，我们亲手打通了从搭建私有组件库、配置资源服务，到将其无缝融入 TinyEngine 物料体系，乃至最终通过编写插件解决实际工程问题的完整闭环。掌握这些基础后，你将能更自信地去探索 TinyEngine 提供的丰富功能，构建更复杂的低代码应用，甚至为这个充满活力的开源社区贡献自己的一份力量。当然，我们也可以应用 AI 帮我们生成组件 schema，我在附录中提供了一条 prompt，经过我的多次优化，使用效果还不错。

2025-04-01 09:15:09 423

空空如也

空空如也