- 博客(191)
- 收藏
- 关注
RSS订阅
原创 esbuild为什么生产环境不用？
近几年esbuild凭借“极速构建”的特性爆火，基于 Go 语言编写、毫秒级打包、碾压传统 JS 构建工具的性能，让很多开发者产生两个经典疑问：esbuild 速度这么快，为什么不能彻底取代 Webpack？Vite 开发环境依赖 esbuild 实现极速启动，为什么生产打包却换回 Rollup，不用 esbuild？市面上大多解读只讲“快与慢”，没有讲清工程能力边界、生产环境诉求、工具定位差异。本文从工具定位、底层能力、生产工程化要求、产物质量、生态架构。
2026-09-07 00:19:43
926
原创 CodeGraph：代码的图表示与应用-Day33
CodeGraph是将源代码中的实体（如函数、类、变量、文件等）及它们之间的关系抽象为图（Graph）的一种数据结构。图中的节点代表代码元素，边代表元素之间的语义关系（如调用、继承、数据流、引用等）。与传统 AST 相比，CodeGraph 不仅保留语法结构，还显式地表达跨过程、跨文件的语义连接。函数foo()调用了bar()，则图中存在一条从foo到bar的“调用”边；类Dog继承自类Animal，则有一条“继承”边；变量x的值来自函数返回值，则有一条“数据流”边。
2026-09-01 00:32:42
1774
原创 VS Code 骨架屏（Skeleton Screen）深度解析与实战-Day28
VS Code 没有传统骨架屏，但通过生命周期管理、渐进式渲染、V8 Code Cache 等策略实现了同等甚至更优的感知性能。骨架屏在 VS Code 扩展开发中非常有价值，特别是 Webview、TreeView 和 Custom Editor 场景。局部骨架屏优于全局骨架屏，这与 VS Code "分布式优化"的哲学一致。
2026-08-25 01:59:46
998
原创 DeepSeek Harness 全景技术解析-Day23
DeepSeek Harness（dsh）是DeepSeek AI开源的Agent运行时框架，定位为连接大语言模型与真实世界的"执行操作系统"。其核心采用"一切皆插件"的设计理念，基于Cordis元框架实现动态组合能力，支持模型适配、工具注册等功能的灵活扩展。项目采用TypeScript开发，以pnpm Monorepo管理，包含核心模块、LLM适配、Shell执行等能力族。通过Profile和Bundle机制实现配置组合，当前处于开发者预览阶段，不建议直接用于生产环境。
2026-08-19 23:07:12
873
原创 Chromium技术全景解析-Day21
Chromium 作为跨平台浏览器项目，采用多语言协作开发：C++ 为核心底层，JS/TS 负责 UI 和工具链，Python 用于构建自动化，Java/Obj-C 处理平台适配。项目通过 DEPS 机制管理数百个第三方源码依赖，使用 GN+Ninja 构建系统处理超大规模代码。FFmpeg 被裁剪集成用于多媒体解码，需注意专利合规。学习难点包括代码规模庞大（3500万+行）、多进程沙箱架构、Mojo IPC 通信机制，以及安全模型和跨领域知识要求。首次构建需数小时，推荐100GB+磁盘空间。
2026-08-17 23:23:38
895
原创 Cordis框架: 为可逆软件系统而生的元框架-Day18
Cordis是一个专注于组件安全组合与热插拔的元框架，最初源于聊天机器人框架Koishi的插件系统，后被DeepSeek Harness采用。其核心是"时空可组合性"：时间上要求副作用可逆（如自动撤销资源），空间上强制显式声明依赖。Cordis通过插件、上下文、依赖注入、类型化事件和可逆副作用五大概念，实现2000行精简代码的高效管理。典型应用如DeepSeek Harness，将所有AI Agent能力模块化为可热插拔的插件。该设计为长期运行、高频更新的复杂系统提供了可靠架构基础。
2026-08-14 23:37:22
3355
原创 【跨桌面应用开发】Neutralinojs快速入门指南
Neutralinojs是一个轻量级跨平台桌面应用开发框架，使用HTML/CSS/JavaScript技术构建。相比Electron，它具有显著优势：空项目仅2MB体积、毫秒级构建速度、低内存占用，依赖系统WebView而非捆绑Chromium。开发流程简单：安装CLI工具后，通过neu create初始化项目，修改HTML/JS文件即可快速开发。支持热重载、原生API调用（如系统对话框、文件操作）和主流前端框架集成。构建后的应用仅2.5MB大小，适合需要轻量级解决方案的场景。
2026-03-28 22:06:32
635
原创 AI + SDD 开发流行 npm 依赖排名
包周下载量说明ajv287.9MJSON Schema 标准校验器，生态最广zod213.9MTS 类型安全 schema，.parse()/.safeParse() 运行时校验82.4M从 TS 类型推 JSON Schema，Fastify 默认路径joi19.6M老牌，API 风格成熟yup8.5M表单校验场景常用新项目、TS 栈无脑 zod——它是 AI 工具链（OpenAI Agents、Vercel AI SDK）的"官方推荐 schema 语言"，生态最顺。
2026-09-21 23:09:12
297
原创 WebView 是什么？
简单说，。它本质上是操作系统提供的原生组件，封装了浏览器渲染引擎（Chromium 或 WebKit），允许原生应用在不跳转到外部浏览器的情况下，直接在自己的窗口里加载、渲染和交互 HTML/CSS/JavaScript 内容。。WebView 就是浏览器被"剥掉 UI 外壳"后剩下的渲染引擎部分。
2026-09-21 22:57:54
324
原创 SDD 规范驱动开发：为什么需要它，以及最佳实践
SDD 是什么：规范是第一性产物，代码为规范服务；契约是唯一事实来源。为什么需要：前后端并行、文档一致、破坏性变更可控、沟通成本降低，以及 AI 编码时代消除歧义。最佳实践：Spec-first → lint + 评审 → mock 并行 → 代码生成 → 契约测试进 CI → 版本化 → 渐进式落地；全程遵守"最低规格严谨度"原则。
2026-09-21 22:54:23
227
原创 开源分享 | Pake：一条命令把网页变桌面应用，体积仅 5MB
浏览器里同时开着 ChatGPT、DeepSeek、微信读书、Notion、YouTube……标签页多到找不到想给某个 Web 工具做一个独立的桌面客户端，但 Electron 动辄 100MB+ 的体积让人望而却步想把自己的 Web 项目快速打包成桌面应用分发，但配置 Rust + Tauri 环境又太繁琐如果你也有类似的困扰，那么今天分享的这个项目，可能会成为你工具箱里的新宠——Pake。用一条命令，把网页应用变成体积小、速度快、体验接近原生的桌面应用。
2026-09-21 22:46:42
226
原创 Bun 从入门到进阶：一个工具链干完所有事
Bun 是什么：一个运行时，同时兼任包管理器、打包器、测试器、脚本执行器和内置工具箱——装一次，全链路提速。怎么入门bun init建项目，直接跑 TS，全程不需要配置文件。进阶能干什么Bun.serve起服务、Bun.SQLite存数据、编译成单文件可执行程序、bun test写测试。下一步建议：把第六节的留言板代码在本地跑一遍，然后试着给它加一个「按 ID 删除」的接口和对应的测试——跑通这两个练习，Bun 的主要能力你就都摸过了。
2026-09-21 22:27:31
797
原创 Authorization: Bearer中的Bearer有啥用？
先给结论：这里的Header指的不是 JWT 三段式里的那段Header，而是。大家统一用，本质是"跟着标准走"——下面拆开讲。
2026-09-20 23:19:06
308
原创 JWT 与 Ed25519：从三段式结构到 Node.js 密钥实践
JWT= 三段式（头 + 载荷 + 签名），签名保证内容不可篡改；多服务鉴权优先非对称算法。Ed25519= 基于 Edwards25519 曲线的 EdDSA 签名方案，32 字节私钥 + 32 字节公钥 + 64 字节签名，快、小、确定性强，是当前签名算法里性价比很高的选择。密钥对应关系：私钥是根，公钥由私钥单向推导；私钥签名、公钥验签；公钥无法反推私钥。Node.js 生成一条命令拿到 PEM 文件；JWT 签发/验证用jose（jsonwebtoken 实测不支持 EdDSA）。
2026-09-20 22:50:07
119
原创 请求层增强：重试 · 并发去重 · 401 无感刷新队列
** 是否参与并发去重，默认 GET/HEAD 开启 */dedupe?: boolean/** 'cancel-last': 取消旧的发新的(默认) | 'block': 丢弃新的 | 'off': 不去重 */dedupeMode?/** 该请求是否跳过 401 刷新流程（刷新/登录接口必开） */: boolean/** 是否允许本层重试（默认 true） */skipRetry?: boolean/** 业务幂等键，POST 允许重试时必须带 */: string。
2026-09-15 23:50:48
13
原创 Zustand 客户端状态管理
定位：本套技术栈的。第 3 篇已经把边界钉死了——接口数据进 Query，UI 状态进 Zustand。本篇解决的是「进了 Zustand 之后怎么组织才不会变成第二个 Redux」。⚠️：本文基于。v5 相对 v4 有破坏性变更（create只接受函数形式、persist必须显式提供storage、中间件类型签名调整等），文中已标注。API 细节随小版本迭代较快，落地时请以你实际锁定版本的官方文档为准交叉核对。
2026-09-15 23:43:51
75
原创 TanStack Query 服务端状态管理
这是整套技术栈最容易失控的地方。TanStack Query 不是全局状态管理库，它管的是「服务端状态」；Zustand 管的是「客户端 UI 状态」。两者的分界线决定了后面所有架构决策。!id })// ❌ 别这样解构再包回去 —— 丢失了原始对象的类型与方法。
2026-09-15 23:41:39
106
原创 React Router v7 路由设计
定位：本套技术栈的。Vite 管怎么跑起来，Router 管页面怎么组织、数据怎么加载、权限怎么卡。⚠️：React Router v7（2024-11 稳定版）合并了 Remix，API 面积极大变化。本文基于。：网上流传的并不是 React Router 的官方 Route 属性（Remix/RR 从未提供过这个字段）。加载态的正确做法是+ 布局里的 loading UI，框架模式下用。下文会详细讲。
2026-09-15 23:39:09
542
原创 Vite + TypeScript 工程化配置
定位：整套技术栈的。后面六篇（Router / Query / Zustand / ESLint / 脚手架整合 / 部署）全部建立在本篇的目录结构、别名规则和类型检查策略之上。配置写错了，后面全是补丁。
2026-09-15 23:35:48
168
原创 Vue 入门指南：渐进式框架的快速上手之路
Vue（读音 /vjuː/）是一套用于构建用户界面的渐进式 JavaScript 框架，由尤雨溪于 2014 年创建，当前主流版本为Vue 3。"渐进式"是最核心的设计理念：可以只用 Vue 做一个简单页面增强，也可以搭配路由、状态管理、构建工具扩展到大型单页应用——用多少，取多少。Vue 用"响应式 + 组件化 + 渐进式"三件事，把前端开发门槛降到友好、效率提到高效——非常适合作为前端入门的第一套框架。
2026-09-15 23:32:27
13
原创 React 框架入门：从零到能写项目
把组件间共用的状态逻辑抽成一个以use开头的函数，这是 React 复用逻辑的唯一推荐方式（替代了 class 时代的高阶组件）。})// ...命名必须useXxx，这样 ESLint 才能按 hooks 规则检查它。把上面那堆 boilerplate 抽成，组件只拿。JSX 描述视图 → 组件拆分结构 → Props 单向传递数据 → State 驱动视图更新 → Hooks 注入状态与副作用 → Context/状态库解决跨层通信 → 路由组织页面 → 数据请求库管理服务端缓存 → 性能优化收尾。
2026-09-15 23:27:26
12
原创 Babel 原理分析
把代码变成树，在树上做手术，再把树打印回代码。负责词法语法的正向解析，产出不含空白注释的纯描述性 AST；用 visitor 模式深度优先遍历，配合path.scope的作用域分析能力安全地增删改节点；负责序列化并输出 source map。在这之上，Plugin 是最小转换单元，Preset 是插件集合（注意 Preset 逆序执行），preset-env按 browserslist 按需转译语法，而 API 层面的空缺则由core-js（污染全局、适合应用）或（沙箱隔离、适合库）填补。
2026-09-15 00:00:27
424
原创 文件监听原理：从内核到前端工程化
内核提供变更通知，Node 提供不统一的包装，工程库负责抹平差异并做事件聚合。拆开看：Linux 的 inotify 是非递归的 inode 级通知，高效但要自己遍历目录、受限制、且监听目标 inode 变更后静默失效；macOS 的 FSEvents 是递归的卷级事件流，省资源但事件可能被合并；Windows 的原生递归但重复事件多。Node 的是 5 秒一轮的 stat 轮询（遗留 API），fs.watch才是原生通知，却存在filename缺失、recursive。
2026-09-14 23:59:40
77
原创 Source Map：是什么？生产环境怎么用？
Source Map（源码映射）是一种将转换后的代码映射回原始源代码的技术。它本质上是一个 JSON 格式的索引文件（通常以.map为后缀），记录了压缩、编译、打包后的每一行每一列，对应原始项目中哪个文件的哪一行哪一列。Source Map 的本质是在「开发者体验」和「线上性能/安全」之间做一次可控的交换。它用几倍于原文件的体积，换来了从回到的能力。开发环境要全，生产环境要藏，高安全环境要关。具体展开就是：开发环境用保证调试效率；生产环境用。
2026-09-14 23:58:31
12
原创 Webpack 构建速度优化完全指南
原则说明先测量用--profile/ smp 找到耗时大头，别凭感觉缓存优先webpack5 filesystem cache 是性价比之王引擎升级swc / esbuild 从根上换掉最慢的环节范围收紧少处理一个文件，就少一分耗时持续度量把构建时间纳入团队指标，防回退一句话总结：80% 的构建提速来自"开缓存、换引擎、收范围"三件事——今天就量一下你的构建时间，明天就能让它减半。
2026-09-14 23:57:52
13
原创 如何编写一个 Webpack Loader：思路与实战
链上视角：你是流水线的一环，吃进上一个工位的产出，只对"自己负责的那一段转换"负责。契约视角：对 webpack 的契约是——同步 return 或异步 callback、链尾输出合法 JS、依赖要声明、状态要纯净。调试视角：先用最小同步版本跑通，再按需叠加 options、异步、pitch、raw，每一步都可验证。Loader 的上限很低（一个函数），下限也很低（一个箭头函数就能跑挂）。把上面 9 条对照表里的坑提前避开，你就已经超过了大多数"会用 loader、没写过 loader"的开发者。
2026-09-14 23:56:04
8
原创 前端如何写 Plugin？—— 编写 Plugin 的思路
在前端开发中，Plugin（插件）是一种可扩展的架构设计模式。框架提供核心能力和统一的生命周期钩子，开发者通过编写 Plugin 来注入自定义逻辑，从而在不修改框架源码的前提下扩展功能。打个比方：框架就像一台手机操作系统（如 Android），而 Plugin 就是你可以安装的 App。操作系统提供了基础能力和安装接口，App 在这个接口上实现各种功能，两者互不侵入，却又协同工作。Webpack / Vite 构建插件：在打包过程中对代码进行转换、优化或注入Axios 拦截器。
2026-09-14 23:54:16
251
原创 前端构建基石：Webpack 构建流程深度解析
Webpack 是前端应用最广泛的静态模块打包器。把一切资源都视为模块，从入口出发递归构建依赖关系图，最终打包成浏览器可直接运行的静态资源。JS、TS、JSX、CSS、Less、图片、字体在 webpack 眼中都是模块。当前主流版本为 webpack 5.x。理解 webpack 的"依赖图 → 编译 → Chunk → Bundle"主线，就理解了前端构建的本质；其余配置都是围绕这条主线的展开。
2026-09-14 23:51:44
9
原创 Webpack 提效插件实践分享
效率维度第一优先级动作代表插件/能力开发效率HMR + 状态保留 + 报错浮层构建效率持久化缓存 + 换转译器 + 检查并行化内置 cache、esbuild-loader、fork-ts-checker定位效率先测量再优化产物效率让体积可见、传输可压协作效率消灭重复劳动、环境变量一处管先把内置能力（cache、asset modules、mode 默认值）吃干净 → 再把耗时大户（babel → esbuild/swc、同步检查 → 并行检查）换掉 → 最后用分析工具持续盯。
2026-09-14 23:48:46
170
原创 前端 Loader 与 Plugin 的区别介绍
LoaderPlugin一句话把非 JS 资源翻译成 JS 模块监听构建生命周期，编排与优化整个流程视角微观：单个文件宏观：整个构建心智“翻译器”“事件订阅者 / 流程导演”│ Plugin：监听整个构建流程 │││ 依赖图构建中，每个文件经过 Loader 链翻译 ││ less → css-loader → style-loader → JS 模块│Loader 回答"这个文件怎么读"，Plugin 回答"整个构建怎么做。
2026-09-14 23:47:16
11
原创 前端文件指纹：是什么？怎么用？-Day46
在前端工程化中，文件指纹（File Fingerprinting），也常被称为缓存破坏（Cache Busting）或内容寻址，是一种将文件内容的哈希值（Hash）附加到文件名上的技术。简单来说，就是给每个构建出来的静态资源（如 JS、CSS、图片等）贴上一个独一无二的“身份证”。例如，将app.js转换为。这个哈希值是由文件内容计算得出的，只要文件内容发生哪怕一个字节的改变，生成的哈希值也会随之改变，从而生成全新的文件名。前端文件指纹的本质是内容寻址。
2026-09-14 23:45:05
193
原创 前端常见 Plugin（插件）介绍
Plugin（插件）是前端构建工具（如 Webpack）的“构建指挥官”。如果说 Loader 是负责将非 JS 文件“翻译”成 JS 的翻译官，那么 Plugin 则是流程控制者。Plugin 的核心职责是扩展构建流程。它通过监听构建工具生命周期中暴露的事件钩子（如 Webpack 的 Tapable 机制），在打包的各个阶段（如初始化、模块解析、代码生成、资源优化等）介入并执行自定义任务。例如：代码压缩、资源注入、环境变量替换、打包分析等 Loader 无法完成的工作。
2026-09-13 23:35:33
14
原创 前端常见 Loader 介绍
Loader（加载器）是 Webpack 等现代前端构建工具的核心概念。Webpack 本身只能理解 JavaScript 和 JSON 文件，而 Loader 的作用就是充当“翻译器”——将各种非 JS 资源（如 CSS、图片、TypeScript、Vue 组件等）转换为 Webpack 能够处理的有效模块，进而将其打包进依赖图中。Loader 具备链式调用 Pipeline的特性，执行顺序遵循从右到左或从下到上的管道模式。
2026-09-13 23:31:18
84
原创 前端 Serverless 架构介绍
Serverless（无服务器架构）并非物理上没有服务器，而是一种云原生开发模型。它的核心在于将基础设施的管理职责完全转移给云服务提供商，开发者无需再关心服务器的采购、配置、运维和扩容，只需聚焦于业务逻辑的实现。对于前端开发而言，Serverless 是继 Node.js 之后的“第二次生产力革命”。FaaS（Function as a Service，函数即服务）：以函数为最小部署单元，由事件（如 HTTP 请求、定时任务）触发执行，具备自动弹性伸缩和按量付费的特性。
2026-09-13 23:25:40
49
原创 前端 package-lock.json 介绍
是 npm（从 5.0.0 版本开始）在执行依赖安装操作时自动生成的锁定文件。它记录了项目中所有直接依赖和间接依赖（子依赖）的精确版本号、下载地址（resolved）、哈希校验值（integrity）以及完整的依赖树结构。它的核心使命是解决“依赖漂移（Dependency Drift）”问题，确保团队成员、CI/CD 流水线及生产环境安装的依赖树完全一致，彻底告别“在我的机器上能跑”的玄学问题。
2026-09-13 23:16:57
106
原创 前端 Minify（代码压缩）介绍
Minify（代码压缩/精简）是指在不改变代码逻辑和功能行为的前提下，通过自动化工具移除源代码中的冗余字符，从而减小文件体积的过程。需要特别区分的是，Minify 精简与Compression 压缩Minify（精简）：在构建阶段完成，通过语法分析删除空格、换行、注释、缩短变量名等。输出文件通常带有.min.js或.min.css后缀。Compression（压缩）：在服务器端完成，使用 GZIP、Brotli 等算法对文件进行二进制编码压缩。
2026-09-13 23:10:28
174
原创 前端 Browserslist 介绍文档
Browserslist 是一个在不同前端工具之间共享目标浏览器和 Node.js 版本配置的工具。它允许开发者通过统一的查询语法，定义项目需要兼容的浏览器范围。在现代前端工程化中，Babel、Autoprefixer、PostCSS、ESLint 等工具都需要知道目标浏览器才能进行正确的代码转换或兼容性处理。Browserslist 提供了一个单一配置源（Single Source of Truth），避免了在不同工具中重复或冲突的配置。Browserslist 是前端工程化的基石之一。
2026-09-13 23:05:18
118
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人