- 博客(1313)
- 收藏
- 关注
RSS订阅转载 深入解析前端插件机制：以埋点SDK与Webpack为例
最近在做前端监控的全链路项目, 刚好埋点SDK这边的架构设计需要用到插件机制, 就想着和之前学过的webpack插件机制进行一个类比, 看看有哪些共通和差异之处。在现代软件开发中，插件机制是实现系统扩展性和灵活性的核心设计模式之一。插件机制通过将核心功能与扩展功能分离，使得系统能够在不修改核心代码的情况下扩展能力。：ByteTop 的监控场景要求“永不中断”，Webpack 的构建场景允许“快速失败”。为例，深入探讨两者的插件机制设计异同，并揭示其背后的设计哲学。
2025-03-31 18:44:25
6
原创 面试官最想听到的Vue和React区别
例如，可以仅使用核心库实现基础功能，再按需引入Vue Router（路由）、Vuex（状态管理）、Vue CLI（构建工具）等。：React拥有庞大的生态系统，包括React Router、Redux、Axios、Ant Design等，且持续引入创新方案（如React Query、Zustand）。：React强调“声明式UI”，通过JSX语法将UI描述为纯函数，开发者只需定义状态（State）和UI的映射关系，React自动处理UI更新。）等，语法更接近传统HTML，适合传统前端开发者。
2025-03-25 11:37:35
746
转载 说说你对esbuild和swc的理解？
内置代码压缩、Tree Shaking 功能，支持 JS/TS/CSS 的简单处理（需插件扩展复杂功能）。：缺乏复杂资源处理能力（如图片、字体），需配合其他工具（如 Rollup）完成完整构建流程。实现，利用多线程并行处理和高效内存复用机制，性能远超传统工具（如 Webpack）。：不支持 ES5 降级（仅到 ES6）、装饰器语法，且无法操作 AST。：缺乏打包能力（swcpack 不成熟），需配合其他工具完成构建。：复用 AST 结构，避免传统工具链多次解析 AST 的开销。
2025-03-24 19:58:05
14
原创 简单粗暴啊！对比SolidJs和React。。。
SolidJS 确实在设计上借鉴了 React 的诸多特性，但底层机制却有本质不同。欢迎自荐投稿到《前端技术江湖》，如果你觉得这篇内容对你挺有启发，记得。一、SolidJS 与 React 的相似与差异。：即使只有 1 个数据变化，也要重新渲染整个组件。3.1 React 更新流程（简化的伪代码）：先计算虚拟DOM差异，再操作真实DOM。：每个状态变化只更新对应的 DOM 节点。：直接操作真实DOM，无中间计算层。：提前确定状态与DOM的依赖关系。SolidJS（直接DOM）：提前建立状态与DOM的关联。
2025-03-21 12:22:49
286
转载 如何在前端开发中实现零停机部署
在本文中，我们将探讨在前端开发中实施零停机部署的实用策略，帮助你平稳地交付更新，而不影响用户的体验。零停机部署是一种技术，通过这种技术，对应用程序或网站的更新可以在不造成任何服务中断的情况下进行部署。这种方法可以在不向所有用户暴露新功能的情况下，在实际环境中测试新功能，从而在管理新功能发布的同时实现零停机。功能标志，也称为功能切换，可以让你在不部署新代码的情况下控制新功能或更新的可见性。自动化有助于维持可靠且可重复的部署过程，从而实现更快更高效的更新，并最大限度地减少潜在的停机时间。
2025-03-19 19:39:56
52
原创 破防了！原来Vue响应式设计的如此巧妙
Vue 响应式系统的巧妙之处在于： 自动依赖收集：不需要手动声明依赖关系，Vue 会在数据被访问时自动建立依赖关系 精确更新：只有真正依赖某个数据的视图才会在该数据变化时更新，而不是整个应用重新渲染 深度响应：对象的嵌套属性也能被监听，因为 Observer 会递归地将嵌套对象也变成响应式的。Vue 的响应式系统是其最核心的特性之一，它让我们通过简单地声明数据与视图的关系，而不需要手动操作 DOM。Watcher 就像是一个"侦探"，负责监视数据的变化，并在变化时执行特定的操作，如更新视图。
2025-03-18 17:30:58
489
原创 30分钟扩展七牛云图片上传功能
https://developer.qiniu.com/kodo/manual/upload-token），我整理了一个简单可用代码，在node下执行就可以输出token。自己做网站、做小程序时我一般都用七牛来存储图片，如果产品日常更新有较多图片，那么直接使用七牛上传就会很麻烦。我希望能尽量的省事儿，不需要登录，可以直接从剪贴板上传图片，上传后能直接得到cdn的地址。token的获取必须通过服务端拿到，前端无法获取。只要有上传token就可以把图片上传到自己的七牛空间里。（其实调教AI撸一个）
2025-03-17 17:39:48
222
原创 cursor已经到这种地步了？2分钟开发一个AI生图功能
接口文档 @https://docs.siliconflow.cn/cn/api-reference/images/images-generations。上面的页面布局和功能开发，如果纯手写需要多久？然而cursor2分钟就搞定了。这次用cursor开发一个ai生图功能，基本上一句话就能把整体功能完成80%。（当然这不重要，出图质量和提示和模型都有关系，目前使用的是免费模型）在xxx目录内实现输入prompt就能生成图片的功能，然后再对细节布局和功能进行调整就可以。或者点击左下角阅读原文。
2025-03-14 19:51:58
132
转载 尤雨溪：围绕Vite的前端统一工具链（D2 终端技术大会）
本文由@前端技术江湖整理，转载请注明出处刚看完D2终端技术大会上的尤大大的分享，顺便把关键信息记录了一下，方便快速浏览。信息量很大，收获很多。完整视频在最后！成立的自己的公司 - void（0）...
2025-03-11 18:12:04
40
原创 Vite为什么选用Rollup打包？
Vite 在生产阶段使用Rollup打包，但这不是唯一选择。它的设计背后有明确的权衡和考量，同时开发者也可以选择其他替代方案。一、为什么 Vite 默认使用 Rollup？1.Rollup 的核心优势•Tree-shaking：Rollup 的静态分析能力极强，能精准剔除未使用的代码（Dead Code Elimination），生成更小的产物体积。•输出格式灵活：支持 ESM、Comm...
2025-03-10 08:09:43
701
转载 Vue 3.6 将带来这些重磅功能，更快、更强！
Vue 3.6 将带来这些重磅功能，更快、更强！在不久前举办的 Vue Nation 大会上，Vue 作者尤雨溪分享了即将发布的 Vue 3.6 的新特性：① Alien Signals 1.0 的集成（p2-p3）：Vue 3.6 将 Alien Signals 1.0 移植到 v3.6 分支，重构了响应式系统，显著减少了依赖追踪的开销，降低了内存使用，提升了响应式数据追踪的性能。Alien S...
2025-03-09 09:01:50
41
转载 用了就离不开的13个cursor特性！
最开始接触 cursor 的时候是在去年年初，openAI ChatGPT 带火了一批 AI 概念产品。GitHub 的 Copilot 自不用说，很早就在使用，有了大模型的加持当时也是如日中天。 我记得 cursor 当时主打的点是：可以无逢迁移 vscode ，vscode 的所有插件可以直接一键转移到 cursor。连界面都一模一样轻巧、快速。体量小，启动快，编程效率高可用免费的 AI 模型...
2025-03-08 19:25:45
114
转载 DeepSeek 锐评国内前端现状
在前端圈，总是能听到各种吐槽不断。我的好友 迪普斯克 看在眼中，记在心中。乘着周末的空闲，邀请它来锐评一下。以下内容仅供周末娱乐，切勿入戏太深。（把腿架在八仙桌上，烟斗在桌角磕出火星子）兄弟们，这前端江湖的水，比他娘的黄四郎的银子还浑！老子今天把话撂这儿：一、框架换得比窑*的姑*还勤！（拍案而起）今天 Vue 明天 React，后天 Svelte都能吹成屠龙刀！你们是写代码还是逛八大胡同呢？老子刚...
2025-03-06 23:40:29
44
转载 基于web-see的前端监控方案实现
1、需求背景最近在研究前端项目的监控，找到了web-see这个工具，jake/web-see[1]，还有使用demo，github.com/xy-sea/web-…[2]。这个工具提供了上报错误、定位错误源码、记录用户行为等功能。2、实现方案参考web-see-demo，运行node服务，提供接口：错误上报、错误列表查询、获取源码等该接口。为了实现获取源码的功能，需要将前端项目sourcemap...
2025-03-02 08:18:39
28
转载 大厂都在做的前端稳定性到底是啥呢？
引言在一次公司的前端无法访问的事故复盘后，我们调查了关于应用稳定性前端可以做些什么。对于前端稳定性其实在整个用户访问到页面到请求都需要全链路的监控与追踪，每一个环节都值得我们深入探究一下。本文就从应用服务器、静态资源、页面渲染、接口请求4大方面来各个击破，看看前端稳定性到底需要如何建设。应用服务器应用服务器在整个链路的最上游，从用户在地址栏输入域名访问后，流量通过网关（由于网关层的稳定性在大多数公...
2025-03-01 23:58:27
35
转载 2025-React 生态系统
导读：这是国外程序员 Robin Wieruch 带有明显个人色彩的一份总结，每年都会更新。相比于awesome 列表[2]，我个人更喜欢这类总结，简短、实用，更容易让人抓到重点并能立即实施。React 的是一个由组件驱动的 UI 框架，JSX 以及 React Hook 都是其首创的先进理念。经过多年的发展，React 拥有一套非常庞大的生态系统，不过这也导致从其他库/框架转过来的开发人员带...
2025-02-26 13:24:49
44
转载 一次性上传 1000 张图片, 总量 10GB 的方案设计
背景最近有一个上传文件方面的需求，上传图片，用户可以选择文件夹上传。文件夹里的图片可能很多，而且由于特殊的项目背景，用户选择的图片可能会比较大，10MB左右。这里就需要做一些方案上的设计了，确保整个过程的流畅和容错。方案设计这个过程中需要考虑到的细节主要是以下几点：重复图片的认定图片上传任务的控制上传失败和上传中断处理图片去重hash图片去重这一块，我们可以在前端做hash，但是对于...
2025-02-25 23:26:17
38
转载 AI能写出这些代码吗？分享一些不错的JS/TS代码片段
整理笔记的时候发现之前存的一些写得还不错的代码片段，分享出来参考参考，可能后面就直接让AI写了。方法顺序执行，不论同步还是异步以下代码实现方法顺序执行，不论同步还是异步，letresult;for(constfof[func1, func2, func3]) { result =awaitf(result);}/* use last result (i.e. result3...
2025-02-21 19:37:31
12
转载 aiCoder：利用AST实现AI生成代码的合并工具
作者：@Mike Molinari项目：https://github.com/mmiscool/aiCoder背景Mike Molinari 最近发布了一个名为aiCoder的项目，这是一个利用抽象语法树（AST）技术来实现 AI 生成的代码片段与现有代码文件无缝合并的工具。与传统的基于行的合并方法不同，aiCoder 通过解析代码的语法结构，确保 AI 生成的代码片段能够以 “外科手术般的精...
2025-02-18 13:23:47
51
转载 React 首次推出原生的动画支持！
React 一直是前端开发者最受欢迎的框架之一。但是 React 的动画支持似乎一直是个短板。虽然 Vue 和 Svelte 等其他框架相继推出了便于实现动画的 API ，React 开发者长期以来不得不依赖于第三方库，如 Motion for React 和 React Spring 来补足这一缺陷。最近，这种情况终于迎来了转机。React 团队即将推出了一个名为 <ViewTransit...
2025-02-17 23:32:23
19
转载 Create React App被官方弃用！该如何搭建新的 React 项目？
在前端技术日新月异的今天，React 社区已经不再将 create-react-app 作为创建新项目的首选工具，而是推荐使用社区中流行的由 React 驱动的框架来创建新项目。本文就来探讨在 2025 年创建 React 项目的方式及其优缺点！Create React App 有什么问题？Create React App（CRA）于 2016 年 7 月首次发布，是一个方便快捷的 React 项...
2025-02-13 13:26:51
201
转载 DeepSeek启示录！
腾讯云近日推出了 HAI 上的一键部署、3分钟可用的 DeepSeek -R1 实例，由于过于火爆，排队等待之余，写一写我对 DeepSeek 的思考。对于大语言模型 AI 的应用，我属于比较乐观的人群，在2022年9月就在信通院的可信数字化公号里写了一篇对未来应用的预言，2023年5月又在信通院的低无代码峰会上，随着腾讯和百度工程师现场演示的自然语言+大语言模型+低代码三位一体的开发方式，我感慨...
2025-02-10 10:02:11
43
转载 5大 零JavaScript Rust 框架崛起，前端瑟瑟发抖
前言本文主要和大家讨论全网最火的5个基于Wasm 的 Rust 框架，使得开发者不用编写一行JS代码就可以写前端应用。在年初，我也确实使用 WebAssembly 将客户端应用成功移植到了 Web，这也是为什么我一直对 WebAssembly 充满好奇的原因。正如大家所看到的，当我们还在迟疑是否要在日常开发中引入 WebAssembly 的时候，很多优秀的应用、工具已经开始吃 WebAssembl...
2025-02-09 21:01:06
72
转载 2025 React核心升级方向概览
本文由前端技术江湖整理~2025年，React技术栈迎来了一系列重大升级，从性能优化到开发体验提升，再到生态系统的全面拓展，为开发者提供了更强大的工具链和更灵活的开发范式。本文将基于最新技术动态，解析React在2025年的核心升级方向及其实践价值。一、React 19：编译器革新与性能飞跃React 19引入了革命性编译器，将React代码转换为高度优化的JavaScript，自动处理useMe...
2025-02-07 23:23:20
144
转载 2025 Vue核心升级方向概览
无论是性能优化、服务端渲染革新，还是工具链的全面升级，Vue团队正在为开发者打造更高效、更强大的开发体验。一文速览核心升级方向，提前布局技术红利！???? 一、Vapor模式：告别虚拟DOM，性能飙升！划重点：Vue团队正在研发一项颠覆性技术——Vapor模式，直接操作真实DOM，彻底消除虚拟DOM的运行时开销！无需魔改代码：现有组件可无缝升级，但需使用Composition API语法。极致性能：高频...
2025-02-05 22:31:57
246
转载 奥特曼率队深夜血战DeepSeek，o3-mini急上线！价格骨折免费用，ChatGPT被挤爆
新智元报道编辑：编辑部 HYZ【导读】眼看DeepSeek风头尽显，被逼急的OpenAI果然紧急发布了o3-mni。不光免费用户都能用，每百万输入和输出token价格更是疯狂跳水打骨折价！o3-mini，真的来了。刚刚，OpenAI官宣o3-mini和o3-mini-high两大版本正式在ChatGPT上线。诚如奥特曼所言，免费用户直接打开「Reason」即可体验，Plus用户每天会有更多...
2025-02-02 09:02:35
51
转载 真卷啊......Vitest 都出 3.0 了
在两个月前，Vite 发布了 V6 的版本，这不没多久，与之配套的 Vitest 也官宣 V3 版本正式发布了，这能说这些人啊，太卷了...很多同学可能并不熟悉 Vitest，它其实是一个 基于 Vite 的现代化测试框架，专为 前端单元测试和集成测试 设计的，可以理解为有点类似 Jest。但是，针对 Vite 做了更好的兼容性处理。目前基于 Vite 的单元测试，大部分都推荐使用Vitest 了...
2025-01-23 12:39:52
44
转载 dagger.js实战案例：是牛是马拉出来溜溜啊
大家好，我是非主流前端框架dagger.js的作者王多余。在这篇文章中，我将通过一个实际的TODO List开发案例，展示如何使用dagger.js、React 和 Vue 3 构建功能完全相同的单页应用，深入对比这三种框架在设计和使用上的细节差异。本示例涵盖了现代前端项目中常见的功能模块，包括模板和指令语法、路由配置、数据状态管理、双向数据绑定、事件处理以及组件设计等。为了便于横向对比，我们将项...
2025-01-19 13:59:47
44
转载 支付宝出现重大P0事故！马上要过年，绩效咋办？
1月16日晚，话题#疑似支付宝出现重大bug#冲上热搜。所有订单减免20%网友曝支付宝出现重大事故1月16日下午，多名网友在社交平台上反映支付宝出现bug，所有订单优惠20%，包括个人转账、购票、还信用卡、缴纳房租等。据网友晒出的截图，他们在下午14：40—14：45时间段内，通过支付宝支付时，均被提示“政府补贴”，减免优惠20%。社交媒体截图网友热议：“我刷到的是不是有点晚了”“目测晚上退单率可...
2025-01-17 09:10:30
31
转载 写单测，能提早下班？
单元测试的首要作用是提升开发体验——减少开发过程中的打断，缩短调试时间，从而自然地提高项目的整体质量。那么，单元测试为什么能够减少打断并缩短开发时间呢？关键在于它提供了更短的开发-验证循环。01提高开发体验的核心：更短的反馈链路单测能够提升开发体验的核心在于它提供了更短的开发-验证的反馈循环。在传统开发流程中，从修改代码到验证结果通常需要经过以下步骤：尤其是在 UI 开发中，随着热更新技术的广泛应...
2025-01-17 09:10:30
66
转载 图解Nestjs - 入门指南
转自：https://b-sirius.github.io/posts/learn-nestjs-with-diagram笔者入门Nest的时候属实是迷糊了一阵，本文将从初学者的视角出发，试图为大家解释Nestjs到底是如何运作的。如有错误欢迎指出，谢谢～假设我们来做这样一个服务：宝可梦大全提供四个接口：获取完整的宝可梦列表根据宝可梦编号获取某一只宝可梦的信息获取完整的技能列表根据某个技能获取可以...
2025-01-13 12:51:57
50
转载 用了这些 Vite 配置技巧，同事都以为我开挂了！
写在前面如官网所说，Vite 是一种新型前端构建工具，能够显著提升前端开发体验，它主要由两部分组成：一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热替换（HMR）。一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。首先第一步，推荐先通篇阅读一遍 Vite 的文档：传送门主要了解 Vite 在项目中...
2025-01-10 13:02:02
160
转载 什么是源代码映射？
源映射的必要性早期的 Web 应用的复杂性较低。开发者直接将 HTML、CSS 和 JavaScript 文件部署到 Web 上。在开发工作流中，更现代、更复杂的 Web 应用可能需要使用各种工具。例如：1.模板语言和 HTML 预处理器：Pug、Nunjucks、Markdown。2.CSS 预处理器：SCSS、LESS、PostCSS。3.JavaScript 框架：Angular、React...
2025-01-09 23:16:49
40
转载 太顶了！面试率超高的前端八股文
前天加完班，回家路上翻了下粉丝群。发现群里最近在疯传一份叫《前端offer收割机养成指南》的资料。本来感觉这个title看起来有点离谱，结果没想到仔细一看，这份资料竟然真的有点东西。内容收纳的很全，而且融合了很多今年的新玩意。据我所知有人靠它拿下了45k+的offer…后来我辗转找到了这份资料的整理人，果然是位大佬！他是现任阿里前端Leader，在前端行业深耕近十年，见证了互联网的飞速发展，也见证...
2025-01-08 09:31:44
64
转载 放弃 React，微软 Edge 团队改用 Web 组件减少对 JavaScript 的依赖
转自：InfoQ 作者丨 Richard MacManus译者丨明知山5 月份，微软的 Edge 浏览器团队推出了 WebUI 2.0，旨在通过采用原生 Web 组件取代 React 组件来提升浏览器的响应速度。其核心策略是通过“标记优先的架构”来减少对 JavaScript 的依赖，这意味着客户端需要处理的代码量将减少，从而为用户带来更加流畅的体验。为了了解 WebUI 2.0 项目的进展情况...
2025-01-04 23:48:57
38
转载 2024 结束了，总结下前端现状！
最近，TSH 发布了一年一度的前端状态调查结果，本文将探讨 2024 年前端的现状。前端框架过去一年使用过的前端框架：过去一年使用过的渲染框架：当前前端框架现状：React与Next.js的主导地位：React凭借其强大的社区支持和生态系统，在前端开发中持续占据主导地位。同时，Next.js作为React应用的全栈框架，因其服务端渲染、高效的路由以及对React 19新特性的早期采用，而备受开发者...
2025-01-03 23:58:20
244
转载 突破项目瓶颈：2024 年 Monorepo 工具选择和实践
前言在当今飞速发展的软件开发领域，面对日益复杂的项目结构和不断增长的开发挑战，各团队需要不断调整其开发工作流程，以适应变化中的需求。随着项目的发展，我们发现传统的单一代码库在应对多项目、多库和多服务的情况下显得力不从心。正是在这个背景下，Monorepo（单一仓库）的理念崭露头角。Monorepo 不再是抽象的概念，而是成为了解决日益复杂软件开发挑战的切实有效的工具之一。通过将多个项目、库或服务统...
2024-12-30 23:48:01
275
转载 优秀前端人都知道的H5 移动端调试全攻略
来源：http://jartto.wang/2018/11/01/mobile-debug/作者：jartto随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，修 Bug 于无形。一、概要因为移动端操作系统分为 iOS 和 Android 两派，所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式，才能让你事半功倍。文章会列举目前...
2024-12-28 20:18:48
150
转载 React19: 不是哥们，我useEffect用的正爽，难道会被淘汰吗？
先打个保护壳：以下结论纯本菜????意淫，认为不正确大佬的看个乐呵就行了。????就在前三天，本大二的苦逼学生的团队在给老外做项目的时候，因为他要求使用shadcn,作为团队唯一一个前端切图仔，只能去熬夜修炼。但是在我安装的时候，让我惊讶的并非shadcn的特性，而是哦里shit，这是什么？React19！????????所以我直接放弃学习shadcn(其实大一的时候就用过了)，转头就去了解React19新特性。useE...
2024-12-26 23:02:22
57
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人