前端性能问题排查的一些经验
目前参与的前端项目中，存在一些有性能瓶颈的前端核心业务页面，在数据量10W+的情况下页面卡顿，体验不好。最近着手进行了一波性能排查和优化，记录一下途中的一些心得。
基于msw的前端接口mock工具
在以往的项目中，数据mock比较简单，只需要mockjs的Mock.mock拦截一下请求，或者直接使用Chrome扩展程序来覆盖某些url接口的响应。
我之前写过一个@shymean/mock-server的命令行工具，可以读取一个mock文件，然后快速启动一个mock服务器，用于支持App、小程序等非web开发环境下的接口mock。
但是在目前的系统中，业务使用websocket收发消息的场景较多，而ws造数据是一个比较复杂的事情，常规的mock工具没有办法满足需求。
经过一番调研，最终选择了mswjs，并成功在项目中成功应用起来。本文整理一下整个过程以及一些心得体会。
zustand使用和源码分析
发表于 | 分类于 源码分析
React项目一大痛点就是技术选型太混乱了，没有官方统一的技术栈（当然这也是React生态丰富的原因），就拿全局状态管理来说，我就经历了redux、dva、redux-toolkit、mobx等。
最近接手的项目里面使用了zustand，这是最近两年比较火的react状态管理工具，之前没接触过，本文整理一下其使用方式，在查看源码的时候发现其实现比较简短精炼，因此也一并分析一下源码。
B端和C端应用的一些差异
在我过去的开发工作经历中，一直在从事C端的前端开发工作，接触到的B端就是开发业务内部系统，如运营管理后台啥的；最近开始接触到Saas级别的B端业务。
在学习过程中，发现B端和C端应用存在很多差异，因此稍作整理，记录一下。
全局状态的局限性
在过去的前端项目中，使用过各种状态管理方案，比如redux、mobx、vuex，最近的项目是vue3的技术栈，所以使用的是Pinia。
本文将总结项目中全局状态管理的一些限制，并不会涉及到某个具体状态库的使用或者优劣。
React项目中的几种CSS方案
与Vue不同的是，React作为一个UI库，官方并没有提供推荐的CSS方案。我曾经接手过好几个React项目，由于团队不同，其中的CSS方案差异很大。
本文整理一下迄今为止React项目中常见的几种CSS方案。
正则ReDOS攻击
对用户的输入进行校验，是一个系统稳健性最基础的要求，不只前端要对用户提交的输入进行校验，后端也会对输入进行再次校验。
要校验输入是否符合特定要求，正则表达式是比较常用的手段。这里就有一个潜在的安全问题：ReDoS（Regular Expression Denial of Service） 正则表达式拒绝服务攻击。
本文将介绍这种不是很常见的Web安全问题。
初识service-worker
在整理资料时看到了PWA和service worker，虽然这些概念很早之前就有耳闻，但一直没有机会做PWA的业务，也没有将service worker应用到项目中，本文整理学习一下。
将vite项目进行国际化改造
最近需要将已有的vite项目改造为国际化版本（短期先支持中文和英文），之前对于i18n的实践不多，在一番折腾之后终于将多语言成功落地，本文用来回顾一下整个过程。
类ChatGPT聊天应用效果实现
发表于 | 分类于 技术原理
最近要在产品中加入一个智能助手的功能，后端对接ChatGPT，本文整理一下整个开发过程中用到的技术点，主要是SSE流式数据和前端如何实现打字机的效果
vite构建的拆包策略
前端拆包策略是一个非常个性化的话题，也是性能优化中首屏加载非常重要的一环。在不同的业务、不同的项目都有自己的策略。
在几年前，我负责的项目采用的是webpack + vue-cli，构建策略是
- node_modules会单独打包到
vendor.js文件 - 其他业务代码打包到
app.js import()动态加载的模块会打包成单独的chunk
最近一两年逐渐切换到vite，vite的构建主要是依赖于rollup，默认构建ESM产物，同时通过@vitejs/plugin-legacy构建兼容低版本浏览器的systemjs产物。
在这个过程中，如何拆包、如何配置缓存等问题，都是需要考虑的。本文将深入这些问题，并尝试给出一个vite项目构建的解决方案。
理解二分查找
发表于 | 分类于 数据结构和算法
二分查找用于在有序的列表中快速查询。虽然二分的思路很简单，但是要写出完全正确的二分查找代码，以及灵活使用二分查找解决问题，并不是那么简单。
之前在某个地方看到说，能一次性完全写对二分搜索的程序员寥寥无几。
本文将从分治开始，理解搜索区间，编写出正确的二分搜索代码。
在VitePress中实现内联Vue组件
发表于 | 分类于 技术原理
VitePress默认就支持在markdown中使用Vue组件，唯一的缺点是需要单独将SFC组件文件引入。
本文将探究一种新的方式，直接在markdown文档中编写Vue组件。
初识并查集
发表于 | 分类于 数据结构和算法
并查集可以快速检测两个节点是否连通（具有相同的父节点），虽然用邻接矩阵也可以实现，但并查集空间复杂度是O(n)，且时间复杂度也可以接近O(1)，在处理图中某些特定问题非常有用。
博客v0.9迭代记录
发表于 | 分类于 博客
之前的博客文章是通过hexo来管理的，其目录结构类似于
_drafts目录存放草稿_posts目录保存了全部已发表的文章
这种平铺的结构并不是很容易直观地管理知识点，同时之前实现的SSR并不支持mdx，让一个前端开发者的博客缺失了不少乐趣。
因此我决定回归博客内容为主的本质，根据markdown frist原则、按照目录重新构建博客。
此外云服务器的续费价格变贵、免费SSL证书时效变短，感觉已经不太适合使用云服务器来部署独立域名的个人博客了，因此决定将博客构建为静态网站。
一番技术选型后，我确定使用vitepress作为开发构建工具，使用cloudflare作为部署服务器。本文将整理整个博客重构过程中的一些要点。
TypeScript类型体操
发表于 | 分类于 编程语言/TypeScript
最近看到了一道TS类型体操的面试题，要求实现日期格式化的FormatDate<DD-MM-YY>，用于约束特殊时间格式的字符串。
感觉有点震撼，现在面试八股文都这么考了？震撼的同时还发现，我TM居然不会！
因此我决定用一点时间来学习一下TS的类型体操，并整理在这篇文章中。