Vite静态资源导入这个坑我帮你们踩过了
上周凌晨两点，我盯着控制台里诡异的 404 错误，发现整个项目打包后居然丢失了关键的静态资源。更讽刺的是，这个 bug 偏偏只在生产环境出现——而本地开发时一切正常。如果你也用过 Vite 处理静态资源，今天这个坑可能已经埋伏在你的项目里了…
分类 · 文章
前端技术
前端框架、工程化、性能优化、跨端开发
一段需求、零素材，Claude Code 派了 33 个代理给我做了个 3D 动作游戏
上一篇折腾火柴人的时候，最大的坎是素材：Claude 没有生图模型，Blender 建模也翻了车。这次我换了个游戏来做，需求里没提素材的事，Claude 自己在架构文档里定了一条规矩：不用任何外部素材，一张图片、一个模型文件、一段音频都不要…
diff 算法（虚拟 DOM Reconciliation）
一、技术难点：为什么"算最小改动"这么难 Diff 要解决的问题可以一句话说清：给定新旧两棵节点树，找出把旧树变成新树所需要的最少操作序列（增、删、移）。难就难在这个"最少"上。 难点一：理论最优解，浏览器跑不动 把两棵树的差异化归为经典的…
首屏不是 dist：用“加载账本”治理 Vite 的大包
首屏不是 dist：用“加载账本”治理 Vite 的大包 dist/assets 里出现一个 800 KB 的文件，通常会立刻触发“拆包”行动：加 manualChunks、把组件改成动态导入、把所有依赖塞进 vendor。但这些动作未必改…
组合式 API（Composition API）
一、技术难点：为什么"按选项写组件"会崩 Options API 把组件拆成 data / methods / computed / watch / mounted 几个抽屉。组件小的时候很整齐，一旦一个功能涉及"一份状态 + 两个方法 +…
登录态不是一枚令牌，而是一条可撤销的生命线
登录态不是一枚令牌，而是一条可撤销的生命线 登录态不是一枚令牌，而是一条可撤销的生命线 一次典型的登录态故障，往往不是“Token 过期了”这么简单：页面同时发出十个请求，十个请求同时收到 401；其中一个请求先去刷新，另一个标签页却执行了…
Vue的v-if和v-for混用居然是个天坑
上周上线一个订单管理后台，凌晨3点被电话叫醒——页面卡死，CPU直接拉满。打开监控一看，一个表格渲染了2000多条数据，每条数据都带着5个嵌套的v-if条件判断。这场景熟悉吗？今天咱们就聊聊这个看似简单却暗藏杀机的组合：v-if和v-for…
Vue3 响应式与编译：依赖收集如何升级为节点级靶向更新
阶段三从 React 的 Fiber 与并发一路走到今天，镜头该转向 Vue3 了。Vue3 和 React 站在性能问题的两端：React 没有编译期模板信息，所以用运行时调度换"可中断"；Vue3 手里握着模板编译器，用它换"更少的工作…
HTTPS 协议
HTTPS 即 HTTP over TLS，在传输层透明加密，端口 443，上层应用无需改动。安全关键在于证书链验证：签名、有效期、主机名、吊销检查缺一不可，忽略证书错误等于没有加密。TLS 1.3、会话复用、OCSP Stapling 与…
为了脱离前端鄙视链，于是自己写个框架 - React 党看完沉默了
> 前端鄙视链大家都懂：写 React 的看不起写 Vue 的，写 Vue 的看不起写 jQuery 的，写 jQuery 的看不起所有人。 本文作者，一个 React 一次都没用过的纯 Vue 党，写了个叫 vitarx 的框架。 结果 …
Flutter Riverpod 3：统一打印 Provider 错误与自动重试日志
Flutter Riverpod 3：统一打印 Provider 错误与自动重试日志 在使用 FutureProvider 请求接口时，网络异常会让 Provider 进入错误状态。 Riverpod 3 还会对部分异常执行自动重试。 问题…
协议栈数据流全景分析
> 一次 HTTPS 请求从应用层到物理层的完整旅程，逐层追踪数据封装/解封装过程。 synthesis 页：跨 HTTP协议/TLS协议/TCP协议/DNS协议/ARP协议/ICMP协议 综合分析。 1. 全景拓扑：协议栈封装与解封装 先…
我花3小时debug，就因为JavaScript这个隐式转换坑
周五下午，距离上线还有2小时，我盯着监控面板上某个API的异常错误率从0.1%飙升到15%。翻遍日志发现一堆Cannot read property 'x' of null——明明数据校验逻辑里写了严格的非空判断，为什么还会漏？ 现象：隐式…
在职前端 Skill 和 MCP 分享
距离上一次分享已经过去好久，这次主要分享我在做迁移代码仓时用到的一些 skill，同时也移除了一些 mcp。 首先是 skills： show-me 结合 ai 迁移代码往往有数不清的组件生成，复盘或者在研究性能问题时总还是需要了解对应模块…
ECharts：把数据变成故事的可视化利器
如果你在前端圈子里摸爬滚打过一段时间，大概率听说过 ECharts 这个名字。它是百度团队孵化、后来捐给 Apache 基金会的开源图表库，全称 Apache ECharts。这些年它已经从一个国内团队的内部项目，成长为全球范围内使用最广泛…
TypeScript速通笔记（下）
前言 欢迎回来！上一篇我们把 TypeScript 的基础类型、函数、枚举、断言这些“入门必会”的东西过了一遍。今天继续往下挖，进入更实用、也更有意思的进阶部分：交叉类型、泛型、索引签名、映射类型、类型声明文件，以及在 React 里怎么优…
浏览器端 3D 看车重磅升级：从三款展车到可试驾的八车展厅
浏览器端 3D 看车重磅升级：从三款展车到可试驾的八车展厅 发布日期：2026-09-30 开源项目：3d-car-viewing 在线演示：jiaxiantao.github.io/3d-car-view… 上一篇：浏览器端 3D 看车：…
前端路由策略：Memory、Hash 与 History
前端路由策略：Memory、Hash 与 History 前端路由可以理解为：根据当前路径，匹配并渲染对应的组件或页面。对于单页应用，站内导航通常不重新加载整个 HTML 文档，而是由 JavaScript 更新界面。 Memory、Has…
React Native 3：useEffect 自动请求接口 + 搜索功能 + 封装 Loading 组件
本篇是 React Native 学习系列，我们一次性完成三件事： 1. 使用 useEffect 实现页面打开自动请求接口，解决无限循环坑 2. 利用 useEffect 依赖项，实现输入框实时搜索课程 3. 封装公共 Loading 加…
Changesets 3.0 发布：对等依赖下游包默认升补丁版本，纯 ESM 发布，安装体积缩减 88%
- 2026-09-30北京 本文字数：1391 字 阅读完需：约 5 分钟 Changesets v3 发布，聚焦轻量化与现代化：安装包体积缩减至 2.1MB，全面转向 ESM，最低要求 Node.js 22.11 及现代包管理器。 支持…