此刻的我,跟往常一样在顺风车上,在大概的时间,大概的地点想着如何总结我的上半年。。。
说来惭愧,我的上一次总结已经是 2021 年,👉 2021,鬼知道我读了多少遍 React 源码,没想到时间过的那么快,2023 年竟然都已经过去一半不止!是时候有必要总结下上半年的干了些啥。
更文
我一直觉得我的文笔很差,每次写一篇文章都很耗时,甚至不知道如何下手,所以我从去年四月份后,就断更了(主要是懒啦),直到今年二月份开始才继续更文,到目前刚好更了十篇文章(请不要嫌弃月更或季更博主)。文章也主要是在公众号、掘金和知乎发布。
公众号
公众号叫暴走老七,暴走是我从初中就使用的网名,一开始是看到梦幻西游有人在客栈PK,其中一个叫暴走,然后后来看火影里面尾兽暴走,觉得很酷,所以后续就都取名为暴走了(男人至死都中二)。
同时,很多人都很好奇为何叫老七,有些同事还以为我是家里排行第七,我就开玩笑说我家里兄弟姐妹 11 个,哈哈哈,笑死了:
实际上老七是来源于 b 站【让学】消失的老七,究竟去哪儿了?老七是叛徒吗?,我本身也是很喜欢让子弹飞,又觉得阿婆主讲的挺好(这个见仁见智啦),所以取名【暴走老七】,所以别再好奇我是不是排行第七了,哈哈哈,我就只有一个哥哥,两兄弟!
然后公众号目前基本是处于散养的状态,直到今年才开始有大佬转载几篇文章,但我目前还是没怎么去管理。不过,还是感谢有一些读者关注,请不要取关,我会不时更新文章的,哈哈哈~
掘金升级到 LV.5
有一天,我登录掘金 app 的时候,弹出了个升级到 LV.5 的的提示
终于是五级号了!想想,自己以前都是作为读者的身份,现在也算是输出了点东西,虽然还是个月更甚至季更博主,但还是收到正向的反馈和肯定,所以这里特别感谢各位读者,愿意收藏或者赏给一个 👍🏻,您的一键三连是我持续更新的动力!
刚好这些文章也是大多围绕着我折腾了什么、解决了什么、开源了什么来写的,那就按照时间线,看看我究竟做了哪些杂事👇。
工作和技术
熟知我的人,都知道我过去的工作经历主要都是 react 技术栈,但今年以来,我除了工作上需要用到,已经很少去折腾 react 了,甚至可以说有点腻。
那么,今年上半年,除了日常的业务开发之外,我究竟在折腾些什么呢?实际上大多是,我遇到哪些地方不好用、麻烦,这时候我就想去优化它,或者做个什么工具来让其变得好用,提升开发体验,让一些繁琐的工作自动化,同时方便自己和同事开发,减少冗余代码等等,具体请看下面我的碎碎念~
接手维护外包做的前后端耦合官网
当时运营那边想做个新官网,但是研发这边没有资源可以投入,所以最终找了外包去做,但是交付过来一堆问题,所以运营那边一直求着研发老大帮忙维护,然后我们公司前端都是 react 技术栈的嘛,而 leader 也不知道从哪里听说公司前端就我会点 vue(肯定不是!),所以把我派去帮忙,刚开始我觉得,不就改几个前端问题嘛,这有啥难。
但当我拉项目后,发现官网实际上是个前后端耦合的项目,后端是 java+spring,前端是 vue,好家伙,导致我后来不仅得改 java,sql,甚至还需要一步步 debug 代码(后端同事有时候没空,所以我只能自己看)
后来,终于登顶屎山,解决完运营那边提出的一系列问题后,就将官网上线了,但事情往往没那么简单。
自从新官网上线后,PV(页面访问量)下降了 50%。原因就是打开官网巨卡,一般需要 7~8s。
就单单请求个 html,就需要耗费 7s+的时间。
后来发现其中一个加载贼慢的原因是官网的图片请求实在是太多了,但是前端代码都是混在后端代码里面,一堆 html 文件,html 里面又混杂着一堆的 Thymeleaf 语法,没法用 webpack url-loader 去处理,所以最终选择的方法是写个 node 脚本来模拟 url-loader,将里面的小图片转为 base64,也就是文章chatgpt,能帮我将 html 中的图片转为 base64 吗的由来。
然后也收到了叶一一大佬的好评:
也很幸运地拿到掘金的证书
想到自己随手写的没啥用的东西,还能帮助到他人,算是无用中的有用,哈哈。
帮同事优化代码,速度快了 1000 倍以上
作为一个工具人,同事有解决不了的,有性能问题的,经常找我这个打杂的帮忙解决。
背景是一个大量解析商品的接口(本身就比较耗费时间,2s 左右),然后响应后前同事又将其放在 mobx 做了各种处理,而 mobx 是个响应式的数据管理库,其将数据都转换为 Observable,无论数据多么深层,导致最终生成每个实例都耗费了 50+ms,那如果有 100 个商品,就要耗费个 5s+的时间,导致客户以为是页面卡顿。
后来我定位到问题,解决方案是将原先响应后的大对象放到静态属性里,用一个 uuid 映射每一次接口得到的大对象,而不是每次都经过 mobx,从而将代码耗时从 5s 变成 5ms。
具体可以从文章你还别不信,我帮同事优化代码,速度快了 1000 倍以上!!了解到。
持续优化小程序体积,并开源 babel-plugin-enum-to-object
实际上从新架构开始,我们的小程序就一直有体积太大的问题,最根本的原因还是在于我们的一个 api 请求库里面有大量的 enum,而 ts enum 转 js 是一个 IIFE 的过程,是有副作用的,这种情况下 webpack 是没法对其 tree-shaking 的。
所以从去年 9 月份我同事找到我后,我就一直在想如何解决主包过大的问题,但由于需求太赶,导致没什么时间去弄,所以就是有时候想起来,就尝试找下解决方案,发现折腾不了,也就没继续弄。
直到有一天,我观察了下打包产物
发现结果都是类似 e[e["xxx"]=0]="xxx"
,那看起来不难,我们让其最终只生成e["xxx"]=0
不就好?
所以就萌生了一个想法,写一个 webpack 插件,处理输出之前的产物,最终将小程序体积降低了 120k,这个可以从随手写了个 plugin,就将小程序体积减少了 120k了解到,同时,也开源了reduce-enum-webpack-plugin。
但以上仅仅解决了一半问题,没使用到的 enum 的一半产物还是会打包进去,所以后续我想了想,enum 最终也是转换为一个对象,所以我萌生了将 enum 转换为 Object 的想法,而如何精准地匹配到 enum,自然将想到用 ast 来做,所以后来我写了个 babel 插件 babel-plugin-enum-to-object,终于成功解决 enum 带来的副作用问题,将小程序主包降低了 286k!!具体可以看看这次我写了个 babel plugin,将小程序体积降低了 286k!
搞一搞 vue
从年初过年放假第一天,我记得是 2023.1.14 号开始,刚好有时间,所以就打算折腾下 vue,毕竟搞了 3 年的 react,现在觉得有点腻。然后就拿写过的移动端项目,用 vue3+pinia 实现一遍,但毕竟 react 的使用习惯根深蒂固,所以总会用 react 的用法来写 vue,比如我写一个 header 组件,接收一个 children,如果判断到传纯文本,那给默认样式,如果是组件,那让组件自定义样式。
那 react 的写法是:
const Header: FC = ({ children }) => {
return <>
{ typeof children === 'string' ? <div style={{xxx}}>{ children} <div/>: children }
</>
}
但 vue 就没法这样,因为传入的默认插槽即使是纯文本,拿到的也是 vnode,但由于是第一天写 vue3,不太清楚如何做,网上也搜不到资料,不过后来发现 vnode 上面有个属性 text,可以用来判断是不是 Text Node
所以后续根据这个写了 hook 来实现这个功能:
以上只是众多例子中的一个,由于 react 和 vue 使用习惯不同,所以无论从哪一方学习另一个框架,总会带有固有思路去学。
后来,因为我 github 关注了 antfu 巨佬,巨佬几乎每天都有动态,我觉得他写的工具都挺有意思,所以也尝试去拜读学习一下,并写了两篇文章:看了 antfu 大佬的 v-lazy-show,我学会了怎么编译模板指令、想到头秃也想不到,Vue3 复用组件还可以这么 hack。
维护自己的 github 模板,并配置 wofkflows
今年还是开源了几个工具,但因为每次要在 github 开源,都得配置什么 eslint 呀,package.json 呀等等,所以就觉得有必要维护自己的一套模板,每次要开源什么东西,就只修改模板中的名字即可,同时将 eslint 检查,单元测试,npm 发包等一系列操作,全部配置到 workflows,让一切都自动化,省去了手动操作带来的麻烦问题。当然,我也将公司 github 项目的发包自动化,避免了每次发包登录 npm 账号,都要找领导要授权码的问题,同时,本地也不用频繁切换个人和公司 npm 账号。
让 console.log 究极进化
这个是因为有一次我在做小程序的时候,有个场景是几个条件不满足的情况下,就不弹窗,否则弹窗,开发环境满足条件都是会弹窗,可是体验版就死活不弹窗,所以就打算 log 下几个变量,然后到体验版打开调试模式看看。但由于变量比较多,而且控制台信息有点多,难以快速查找到对应的代码,所以萌生了写个 babel 插件来改造下 log,添加下源码 log 所在行,变量名,并添加一些显眼的标识,即源码不做任何修改:
而控制台显示所在行,且有变量名的时候添加变量名前缀,然后你可以指定分隔符,如换行符\n
:
实现后我在本地项目测试,没问题后我就将babel-plugin-enhance-log开源了,同时写了文章偏爱 console.log 的你,肯定会觉得这个插件泰裤辣!来分享如何使用。
后来,评论区又有小伙伴反馈希望能在 vite 中使用:
但由于我 vite 使用比较少,所以也只能一点点折腾,不过最后还是搞出了vite-plugin-enhance-log,同样,也写了文章这个 vite 插件让 console.log 究极进化!。
将文章同步到 github 首页
就是有一天看到墨渊君大佬的一篇文章 👉 GitHub 主页美化 & 显示掘金最近发布文章 Top10 🔥,其中有一项是讲如何配置 github action,从而将掘金最新发布的篇文章同步到主页。
但仅支持时间和标题,没有点赞数、收藏等等,且不支持其他平台,如知乎、思否,刚好当时也在接触 github action,所以就想着看看大佬是怎么实现的,然后实现一个满足自己需求的。
目前已经开源在 github:baozouai/multi-platform-posts-action。
支持的功能有多平台、点赞数、收藏数等 feature。具体可以从泰裤辣,github 居然能自动同步多平台文章!了解到。
React 路由自动生成方法和参数类型提示
背景是做需求时,遇到个页面跳转,需要填写路径 url,demo 如下:
我这个人又比较强迫症,觉得之前很多都是硬编码字符串 url,看起来相当的丑,且不知道跳过去应该传啥参数,因为页面不一定是我写的,且就算是我写的,过了几天也不一定还记得页面需要接受什么传参,哪些参数必填等等。
刚好我们的路由是根据文件目录自动生成路径,所以萌生了实现一个根据文件目录自动编译生成路由方法的 webpack 插件,也就是这个 👉 genetate-history-method-webpack-plugin。支持自动根据文件路径生成路由跳转方法,支持读取 index.params.ts 作为跳转参数类型等功能:
具体过程可以看下同事直呼卧槽:React 路由居然自动生成方法和参数类型提示!
生活
上面说了工作和技术所折腾的一些杂事,以下分享下日常生活。
每周往返于佛山和深圳
很多人以为我是佛山的,但其实不是,主要是因为我老婆在这里工作,然后我每周五就从深圳过去佛山,周一从佛山过去深圳。
在佛山顺德,刚好旁边有个渔人码头,所以我跟我老婆早上(她起得来的话)就吃完早餐,到江边走一圈,晚上不累的话就过去那边喝喝柠檬茶,听听人家唱歌,还是感觉挺惬意。
刷剧
不良人第六季
从高三追到现在,画质和打斗也越来越好,第六季感觉还是挺炸裂的,豆瓣也高达 9.5 分
第六季李星云终成不良帅,但可惜说好的女帝有高光时刻,却最终没有。。
镖人
镖人是许先哲老师的,听说在日本挺出名,之前追的漫画,但更新很慢很慢,后来终于出动漫了(虽然感觉比起漫画还是差了一点,但至少血是红的 🤣),背景是隋朝末期,讲述镖客刀马的故事,里面满满的一堆细节~
古相思曲
鱼在水中游,是尾也是头,b站的一部小成本剧。讲述的是逆向时空穿越,女主的过去是男主的未来,可惜结局是 BE😭,看得我emo了几天。
吃吃吃,日料、榴莲、生蚝,不知道吃了多少次啦
该好好减肥了,重了四五斤😩😩
又买了吉他
大学买了两把吉他,都没怎么去学,现在又想搞搞乐器自娱自乐,所以买了把雅马哈 FG830,从头开始学乐理,但比较难受的就是右手拨弦要留指甲,导致敲代码总是被指甲卡到。。
然后还想搞搞其他乐器,比如竹笛,唢呐,甚至想到学唢呐以后可以去做做兼职啥的,哈哈哈。
最后
以上就是 23 年的年中总结的,写的有点乱,有点碎碎念,但也算给自己一个交代,算是折腾了一些东西,不会一事无成,算是对得起自己,加油,共勉~