- 博客(192)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 下篇：打造可观测的异步加载防御体系
本文摘要：探讨构建企业级异步加载防御体系的治理方案，从可观测性、安全发布到复杂架构适配。首先提出多维监控指标体系设计，涵盖性能、稳定性、资源及业务指标，并通过数据采集与现有监控系统集成实现全链路观测。其次介绍基于功能开关的灰度发布机制与自动化回滚策略，确保发布安全。最后针对微前端和SSR/SSG等复杂架构提出适配方案，包括共享缓存、统一调度等优化手段。文章还展望了机器学习预测加载等智能优化方向，形成从技术实现到体系治理的完整解决方案。
2026-04-24 06:30:00
21
原创 中篇：构建弹性的异步组件
本文探讨了构建弹性异步组件的前沿方案。从基础的defineAsyncComponent和React.lazy出发，分析了现有方案的脆弱性，提出了一套增强型异步加载架构。
2026-04-23 08:15:00
17
原创 总篇：异步组件加载的演进之路
《异步组件加载的演进之路：从基础拆分到企业级防御体系》系列文章探讨了前端异步加载技术从简单实现到复杂系统的演进过程。文章分为三个层级：基础增强（解决单组件可用性）、全局资源管理（实现系统可控性）和可观测防御体系（确保持续优化）。中篇将提供智能重试和缓存管理的实战代码，下篇则深入企业级监控与架构适配方案。该系列不仅提供技术实现，更构建了一套完整的异步加载认知框架，帮助开发者应对微前端、SSR等复杂场景下的性能挑战，建立可持续优化的前端基础设施。
2026-04-22 08:30:00
19
原创 从术到道：构建企业级异步组件加载方案的设计哲学与实现精要
本文探讨了基于Vue的企业级异步组件加载方案，从基础实现到完整状态管理。核心设计理念是将异步加载视为包含加载、重试、降级等状态的生命周期。方案包含三个核心模块：useAsyncComponent控制器、AsyncLoading加载态组件和AsyncFallback错误态组件。
2026-04-21 09:15:37
13
原创 前端性能优化的底层逻辑：从“会写代码“到“会诊断问题“的进阶之路
跳出具体技术栈，本文构建了一套前端性能优化的通用方法论。首先阐述关键渲染路径（CRP）原理，提出"最小改动验证"的科学优化流程；继而建立"网络层-资源层-渲染层-计算层"四层分析模型，明确各层优化手段与边界；随后完善从本地Lighthouse验证、线上真实用户监控（RUM）到性能预算防控的完整闭环；最后针对preconnect滥用、Web Worker序列化开销、虚拟滚动限制等场景给出避坑指南，并提供可直接使用的面试STAR话术。本文适用于React/Vue双栈开发者及准备前端面试的工程师，帮助建立"诊断-
2026-04-20 07:30:00
236
原创 下篇：深入浅出：iframe 沙盒环境下的 SessionStorage 劫持与完全隔离方案
简单的存储劫持已无法应对复杂的生产环境挑战。本文记录了一次真实的安全攻防演练，我们发现了 iframe 沙盒中 SessionStorage 可被跨域劫持的重大漏洞。为此，我们设计并落地了一套企业级的三层防御体系：从快速的通信层修复（L1），到根本的存储代理与命名空间隔离（L2），再到主动的运行时监控与防护（L3）。方案涵盖完整的架构设计、性能优化、渐进式部署策略、测试套件，并与 W3C 标准对比，最终沉淀为一套可开源的安全框架。这不仅是技术方案，更是一套可复用的安全架构方法论。
2026-04-17 07:15:00
262
原创 中篇：手把手拦截——iframe 沙盒 SessionStorage 隔离的轻量级实践
你是否遇到过同源 iframe 中第三方组件误删或覆盖主应用 SessionStorage 数据的困扰？本文深入剖析了此问题的根源——同源策略下的存储共享机制，并提供了一个轻量级、非侵入式的运行时劫持方案。通过重写 sessionStorage 的核心 API 并自动添加命名空间前缀，我们实现了存储的完美隔离。文章包含完整的 Vue 3 示例代码、原理解析、安全性考量及多种边界情况处理，助你快速解决微前端及组件集成中的数据冲突难题。
2026-04-16 07:00:00
257
原创 总篇：iframe沙盒存储隔离：从紧急补丁到企业级防御体系的完整指南
在微前端与第三方组件集成的浪潮下，iframe 沙盒环境中的 SessionStorage 安全问题，正从一个隐秘的“技术细节”演变为可能引发数据泄露、权限逃逸的“阿喀琉斯之踵”。本系列文章，将为你完整呈现我们如何从一次真实攻防演练中发现致命漏洞，到构建一套经过生产验证的三层纵深防御体系的全过程。
2026-04-15 09:19:01
420
原创 一个轻量级 Vue3 轮播组件：支持多视图、滑动距离决定切换数量，核心原理与 Swiper 对比
本文介绍了一个轻量级 Vue3 轮播组件的实现，支持多视图、滑动距离决定切换数量等特性。核心功能包括循环播放、自动播放、拖拽滑动、导航分页等，代码仅400行。文章详细讲解了多视图布局计算、循环模式实现、滑动距离映射等核心原理，并与Swiper进行了功能对比。该组件适合轻量级项目，通过原生TypeScript编写，易于定制和维护。实现过程中解决了分页器点数计算、拖拽与点击区分等常见问题，为开发者提供了轮播组件的深入实现思路。
2026-04-14 09:06:11
27
原创 使用 VueUse 构建一个支持暂停/重置的 CountUp 组件
本文介绍如何利用 VueUse 的 useRafFn 构建一个功能强大的 CountUp 数字滚动组件。相比现有方案，该实现支持暂停、恢复、重置等命令式控制，并能动态调整目标值和动画时长。文章详细解析了核心 Hook useCountUp 的实现原理，包括动画循环控制、缓动函数应用和状态管理，并展示了如何封装为可复用的 Vue 组件。该方案零额外依赖，完全基于 Vue 3 组合式 API 和 TypeScript，适用于需要精细控制数字动画的场景。
2026-04-13 08:24:37
32
原创 前端性能优化实战：从5.2秒到1.9秒的代码级改造全记录
本文记录了一个电商商品详情页的性能优化完整过程。针对首屏加载5.2秒、Lighthouse评分32分的现状，采用分层优化策略：资源层通过智能图片组件实现WebP格式自适应与懒加载，构建层借助Webpack/Vite的manualChunks精细化分割代码，渲染层利用Web Workers将长任务从主线程剥离，网络层实施Service Worker的Stale-While-Revalidate缓存与关键资源预加载。优化后LCP降至1.9秒，Lighthouse提升至89分，跳出率下降28%。文中提供全部可运行
2026-04-11 07:03:28
270
原创 前端性能优化：从“术“到“道“的完整修炼指南
针对前端工程师在性能优化中"背了技巧却不会用"的普遍困境，本文提出"术道结合"的双层学习路径。"术"篇聚焦代码实战，通过一个电商详情页从5.2秒优化到1.9秒的完整案例，提供可直接复用的Vue 3/Vite配置、Web Worker组件和缓存策略；"道"篇升华至方法论层面，建立"网络-资源-渲染-计算"四层优化模型，涵盖从测量、验证到监控的闭环体系，并给出面试话术与避坑指南。两篇文章形成"先动手、后动脑"的认知递进，帮助读者既解决眼前问题，又建立长期可迁移的优化能力。
2026-04-10 07:45:24
262
原创 前端架构演进：基于AST的常量模块自动化迁移实践
前端常量模块自动化迁移实践 本文介绍了一次基于AST的前端常量模块自动化重构实践。针对项目中存在的常量管理混乱问题（如Tree Shaking失效、命名空间冗余等），团队开发了两个自动化迁移脚本： 常量文件转换：将export default对象转换为多个export const语句，保留注释并支持TS语法 业务代码迁移：动态发现常量文件，识别旧的导入模式，自动替换为直接引用并生成具名导入 方案采用Babel工具链实现AST解析与转换，具备完整防御机制（文件备份、白名单验证等）
2026-04-08 13:01:12
264
原创 探索Vite深入 Rollup 分块插件：从零实现一个智能 分包 工具
为了解决这些问题，我们开发了 rollup.plugin.robin-build 插件（纯 JS/TS 版本，下文简称“本插件”）。它提供了一套声明式的分块规则配置，支持路径匹配、引用次数阈值、优先级排序等高级特性，让代码分割变得可预测、可维护。
2026-04-07 13:21:51
31
原创 老大语录三 谈需求变更
• 不要强制定义谁的权利，论述清楚底层逻辑更重要。团队成员有权利知道这些。• 团队只有在一个底层价值观下，才能达到士气上的一致，才不会疲于解释各种现象，安抚各种情绪。• 让感知利害关系的人做决策。且敬畏不同的专业。• 方案要基于人性但不是以此为中心，当人性与客观事实存在矛盾时，需要像现实妥协，但仍然充分考虑人性。需求变更，研发人员最讨厌出现的情形。这个是根本上的反感，即使抛开需求变更带来的计划打乱，可能带来的大家需要加班加点填补变更带来的成本。
2024-03-12 13:11:45
1053
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇四]
在这实现第一个组件space[间距]到这里，第一个间隔组件开发完成啦，很简单，按照自己定义的打包规则去处理自己的组件，所以在规则下，开发组件就像自己的开发页面一样，唯一的就是开发组件要有统一的设计和思考，不然长时间下来很难把控。
2024-03-12 13:10:50
565
原创 老大语录二 谈规划
在这之间就有了取和舍，并且也更专业的满足的客户的需求。Tob 类产品需要明确该功能的使用方是谁，一般在什么情况下会切入到该功能，用户看到该功能时下意识希望该功能输出哪些信息，该功能在交互中的期望反馈是什么。比如常见的审批流程，看是就是简单的审批流，往往底层的工作流引擎是需要沉淀的，很多团队也依靠这些沉淀开发出工单系统和OA系统。产品的定位，不同专业功能的敬畏，以及不明确场景下的减法。以上就是对产品功能规划判断的思考，也许有更好的评判公式，但实际经验中的总结也未免不是一种高效的方式来帮助我们来正确的做事。
2024-03-06 18:45:59
821
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇三]
接上文的全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]，进行详细编写rollup打包脚本
2024-03-06 18:36:19
631
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇一]
我们在使用第三方各种UI库，比如element、ant design等提供的ui组件，发现他们打包万变不离其宗，看似复杂其实也不复杂，只要明白其中的原理，抽丝剥茧，就很简单啦！本文接上文的工程项目，进行接下来的工作。当然一个人还是很难和大厂推出的产品进行对比，但是我们不是为了对比，我们是为了提高自己，让能力更近一步。很多博客上博主也有很多讲解rollup的网站不是对api的详细抄袭就是对api文档的解释，基本上没有实战的教程；纯属个人见解，感觉写的很模糊，没有实战性！
2024-02-28 21:54:57
801
1
原创 老大语录一 谈管理
但建立流程时往往会受到部分人员的特殊甚至是个人诉求，如此叠加形成了复杂冗余的流程，更可怕的是这会以所谓“本企业特色”掩盖了优化的动力。之所以会出现对组织人员的素质会有过高的要求，是因为往往事务进展不顺时会发生在某个个体身上，我们往往会开始纠结于某个人如果有更强的职业素质或者综合能力(这里不讨论专业能力不够的情况下)，事故就不会发生。并且一般事物来讲，人才的贡献边际效应一定是递减的。管理逻辑是根据业务需要组建适合的组织，梳理出主要的业务流程(主业务和支撑业务)，制定合适的管理制度约束组织和流程的行为。
2024-02-28 21:53:30
720
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]
本来不想写用的插件单独列出来介绍的，考虑再三还是写吧，正好好好真正的在加深一次印象吧！
2024-02-27 08:25:37
609
原创 手把手教你pkg将Node.js项目打包为可执行文件
突然接到一个演示的需求，背景是这样的，需要在客户那边部署一个项目，但是这个项目需要的服务器的配置比较高，客户那边也没有好的机器，为了看系统的功能性，数据可以不就有真实性，也能慢走，这个时候我给项目经理说，可以考虑只部署前端，但是接口数据怎么来呢？
2024-02-25 06:15:00
3251
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]
一个好的工程化项目，必然有一个好的文档管理，这样才算称得上一个好的工程化，也大大提高后面的工作和文档查找的效率！
2024-02-19 17:18:00
1248
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]
本文从实战出发，初步单间一个为 turbo的基础项目工程项目，本文我估计，是全网唯一一个手把手第一次真正从0到一的完整的教程，纯属个人见解，因为我没有看到像我这么全的！，本文旨意在搭建一个vue3的组件库，后面还有更多的文章信息，我也不知道后面文章什么时候更新，本人很赖！希望搭建鼓励鼓励我！
2024-02-18 20:30:00
2052
原创 手把手教你Termius去除登录并解除限制，非常简单
Termius 8 去除登录并解除限制 多协议远程管理软件 for Mac or for Win
2024-01-30 13:58:02
4779
原创 Module-Federation[微前端]
微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈（vue，react，jq，ng等）独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性独立运行时 微应用之间运行时互不依赖，有独立的状态管理。
2024-01-04 10:02:13
1120
1
原创 linuxnodejs 20.* 安装问题，version `GLIBCXX_3.4.26‘
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
2024-01-03 10:36:10
1253
原创 ES7 至 ES12 实用的新语法
es2016之后有很多很实用的新特性，其中有很多也已经用上了，本次分享想做一个新特性的汇总，希望能对大家有一定的帮助。以下的特性顺序并不是按照时间顺序来的，为了方便记忆，按照数据类型和语法类型做了归类。每个新特性会按照概念，语法和示例几个方面来介绍。
2023-12-22 13:16:29
1814
翻译 尤大的忏悔：Vue 3 启示录
幸运的是，随着 TypeScript 在大多数项目中的可用性，如今，我们能够在类型级别和运行时级别强制执行它，”他说。“对于Vue来说，首先要适应其不断变化的用户群，并适应行业不断变化的需求，我们必须想出一些东西来解决这些新需求带来的新问题，那就是可扩展性，”他说。“这也导致了像 VueUse 这样非常强大的社区努力，它为我们提供了一系列非常有用的实用程序，解决了许多问题，这些问题[并不]真正适合包含在 Vue 核心中，但社区很好地解决了它，”他说。“如今，类型检查是前端解决方案的赌注，”You说。
2023-12-21 10:27:13
746
原创 OxLint 发布了，Eslint 何去何从？
由于最近的rust在前端领域的崛起，基于rust的前端生态链遭到rust底层重构，最近又爆出`OxLint`，是一款基于Rust的linter工具Oxlint在国外前端圈引起热烈讨论，很多大佬给出了高度评价；你或许不知道`OxLint`，相比`ESLint`大家都陌生，你可以认为他们是一样的功能。
2023-12-15 10:56:01
2599
原创 温故而知新篇一
团队分享之设计模式[认知]写在前面的话单例模式工厂模式策略模式代理模式观察者模式模块模式构造函数模式混合模式总结写在前面的话在面向对象软件设计过程中，针对特定问题的简洁而优雅的解决方案。在不同的编程语言中，对设计模式的实现其实是可能会有区别的。（23种）单例模式是保证一个类只有一个实例，并且提供一个访问它的全局访问点。适用场景需要频繁实例化然后销毁的对象创建对象时耗时过多或者耗资源过多，但又经常用到的对象有状态的工具类对象频繁访问数据库或文件的对象资源共享的情况下，避免
2021-10-19 22:02:58
953
8
原创 Rollup 打包通用项目工程库[非TS]，工程化之路
Rollup 打包通用项目工程库[非TS]，工程化之路很长一短时间没有写博客啦！最近刚好有空写了一下，本文侧重于实践，文案描述不太多，总体实现效果如图效果图1效果图2Rollup 的基础概念就不说的，不知道请点击这里看官网在这里就不废话多说啦，直接上代码，下面就是通用的一些基础配置，我们所有的工具类，组件库等都是通过这一块实现的，形成通用的一些配置，形成工程化的模板！下面我以组件库图表为例子，项目工程结构如下：项目目录├─ packages
2021-09-03 08:26:17
1275
1
原创 husky6.* 使用指南、标准化、效率化
husky6.* 使用指南、标准化、效率化前言husky6的版本更新好久啦，但是一些主流的框架都在使用新版的husky，但是好多都是使用的老版本的husky，新版的很少，文档也少。我们团队中正好，搭建新版的组件库，随便研究了一下husky 6.* 的api,并且应用到项目中，这篇文章记录了我加入的指南，避免各猿(媛)友,踩坑。现代原生git钩子变得容易;Husky 提高了提交质量，并提高了规范化！提交或推送时，可以使用它来整理提交消息，运行测试，整理代码等。赫斯基（Husky）支持所有Git钩子
2021-04-07 07:13:36
1516
1
原创 搭建rollup的组件库,研究和实战
搭建rollup的组件库,研究和实战前言今年慢慢的发现大部分主流的前端框架vue和react都采用rollup来打包，但是好多UI组件库，基本没有用rollup来打包，接下来我就基于rollup搭建一个UI库，来发布组件，并且对rollup的一些实践，并记录下来。rollup 介绍官网上是这样说的Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaS
2021-03-29 09:22:02
837
2
原创 开启nginx 用户登录认证
前言最近在做前端工程化的一些东西，形成一种开发文档和组件化的demo,供前端成功可见，其他的部门或者用户通过密码访问，但是这个认证不想太复杂，想来想去，在nginx上配置把，做个拦截，相对来说，没有任何成本，新人入职，可以有个专门的学习和熟悉的过程，大大提高新人的效率和后面的追踪！安装yum -y install httpd-tools生成密码htpasswd -c pass.db idssfe默认在当前位置下会有一个pass.db的文件，我们可以查看该文件cat pass.db
2021-03-22 09:56:04
1154
原创 基于md的UI组件文档库研究
写在前面的话自过年以来，由于时间的原因，一直没有更新博客，年前规划的事情，一直没有推动，一直想写个基于vue3的禅思UI库，迟迟为动手，各个方面的原因都有吧，一边工作，一边要忙着考试，心有余力而不足啊！前端组件化是我们前端圈子里最流行的一段话，也是我们前端在开发过程中面临的挑战。所以我们面临的问题很多，学习的有限，所以一边的学习，一边的去研究，把已有的消化为自己的，这才是技术人员的成长之道。我为了后面我自己的禅思UI库做准备，所以我根据已有的，慢慢去琢磨，看看别人的思想和设计，来完成属于禅思的组件
2021-03-15 09:59:58
1100
原创 webpack升级5之后编译的问题 Cannot find module ‘webpack-cli/bin/config-yargs‘
webpack升级5之后编译的问题 Cannot find module ‘webpack-cli/bin/config-yargs’遇到问题我们在在github项目的Issues看到Error: Cannot find module ‘webpack-cli/bin/config-yargs’ #1948this is the older folder structure i just created a few days ago:所以我们把 webpack-cli 降级到3*的版本 即可
2021-01-26 14:21:05
1202
原创 定制团队的eslint rules(二)
@[TOC](定制团队的eslint rules(二))前言在上篇文章中定制团队的eslint rules(一)，已经介绍了eslint的各种参数说明，配置等等，对它有个大致的了解，接下来，我如何定义的一个自己的团队规则配置，以cicada-eslint-config为列。项工程搭建目录树我搭建我的一个cicada-eslint-config 的项目工程，具体目录树如下。cicada-eslint-config├─ index.js├─ package.json├─ README.md└
2021-01-04 11:24:30
520
原创 定制团队的eslint rules(一)
定制团队eslint前言ESLint介绍作用配置方式配置参数[主要针对第二种方式]Rules 说明结尾语前言我们都知道，javascript 是一门动态弱类型语言。现在平台、环境等各种因素，很复杂，造成团队之间的风格，各种各样，有时候也会出现不可避免的错误，造成的排查力度大，团队维护难，团队合作差等等。然而ESLint的出现，帮我们团队解决了代码统一，风格统一等的问题，让我们能在编译中发现代码错误的工具，在团队协作中，避免低级 Bug，产出风格统一的代码。从而提高团队的凝集力。对外让人感觉很正规的印象。
2020-12-27 14:01:47
6575
11
Ref Effect baseHandler reactive Proxy Vue 3
2024-01-04
websocket封装使用心跳检测+断线重连
2020-01-16
mvvm双向绑定原理和实现
2020-03-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人