大家好，我是雷布斯。

又到了一年的年末，不知道大家这一年过的怎么样，是否觉得自己在这一年有所成长？

今天给大家分享一篇 2023 年的总结，作者从事前端三年，对不同的职级要求有着自己的思考，也值得大家参考下。

如何自我提升

到今年为止，我已经做了三年前端，不再像是刚入行时，不够清醒，发力方向不对，导致走了不少弯路。随着工作年龄增长，职业认知也逐渐成熟，知道每一个阶段所需要达到的能力，如何能让自己更进一步

在中国互联网公司，都把各端岗位拆的比较细，那么例如对于一个前端岗位，各大公司都有一个职级体系，总的来说有以下几个：

• 初、中级
• 高级
• 资深
• 专家
• 资深专家

初阶

一个初、中级工程师，一般来说是入行 0~5 年的同学，这个阶段的要求就是能够完成 mentor 布置的开发任务，不出现重大故障等，做到这些，就可以说你很好胜任了工作。

作为公司来说，肯定是想培养人才的，如果是比较有能力的 mentor，会规划一个 roadmap 给你，告诉你如何达到下一个职级，简单的说，如果你想达到下一个职级，那就要具备一定下一个职级的能力。

举个例子，你作为初、中级工程师，如果你每天都在写页面，那你如果想只靠这个进阶，除非你的业务非常好，随着业务红利上去。否则你和大家没有什么本质区别，都是写页面的同学，你想脱颖而出，那就要做出一些事情，在前端方向大家卷的可以有以下事情。

自动化测试 / 单元测试

可以接入 Cypress、PlayWright，Jest 等框架，那么接入后，如何衡量你的工作质量呢？

可以通过 e2e 覆盖率、单测覆盖率。e2e、单测拦截率等进行衡量，核心都是保证项目的稳定性

研发流程

研发流程可以指很多；

• 本地开发：ESLint、Prettier、Husky、CommitLint、本地调试

• CI/CD：比如可以在 Jenkins 中配置 e2e / 单测卡点，定时巡检。增加构建缓存

• 协作流程：发版流程，仓库协作（commit message），回滚流程，统计千行代码 review 率等

• 监控：配置 Sentry Js Error / 白屏报警等，可以通过配置钉钉、飞书等机器人，让自己第一时间感知到线上问题

• 发布流程：在发版前，预发小流量环境，运行自动化测试等，左移问题，发版操作完成之后自动生成 Changelog、推送卡片到发版群等

性能优化

• 页面加载

这块可以接入 Sentry 等性能监控平台，首先是平台可以展示慢页面，慢请求等，那么在这个基础上，可以去配置一些报警规则，检测 LCP 以及慢请求等防止进一步性能劣化。可以分析具体 case 页面，通过 performance 等工具，排查页面性能慢的原因。

• 打包产物分析

可以接入 Perfsee 等打包产物分析平台，这些工具，实际是去做 Lighthouse 分析，去分析到底有无重复子包，哪些包的 size 过大，可以去做一些懒加载操作等，来优化首屏加载的 bundle size，达到加快页面渲染速度的目标。

引入新技术

前端从 2010 年之后开始爆火，到现在，其实也就 10 几年，还远远没有达到终极态，有很多新颖的技术浮现出来，可以去尝试给项目引入一些新技术：

• 提升构建速度：如果是 Webpack 项目，尝试使用 Rspack 替代，如果难以替代，尝试把 babel-loader 替换成 ESBuild、SWC 等非 JS 语言 Parser
• 微前端：给巨石应用解耦，或者想在一个项目中通过使用不同技术，例如老的 vue2 项目，尝试新代码使用 react18，可以通过 Module Federation、qiankun 等方式进行接入。
• 低代码：项目运营需求大，可以让运营同学能够自己搭建页面，这块阿里之前也有做飞冰和 d2c 平台，字节也有 aPaaS 等平台。
• 依赖管理：很多公司老旧项目都是使用 npm、yarn 进行管理，这都 2023 年了，可以尝试接入 pnpm，如果是大型项目可以考虑直接接入 rush.js
• 组件库管理：很多公司都会有自己的组件库，但是都是杂乱无章，大部分组件库连文档也没有，好一些的会有类似 VuePress 部署的文档站，如果想要更好的体验，可以考虑引入 Storybook，部署一份可视化组件 Playground

沟通协作

如果你觉得上面的比较难做到，更想通过其他方面更进一步，可以从沟通协作上入手。你作为一个项目开发同学，一定能看到项目里存在的一些问题，如果你能站出来，解决项目中的问题，推动各方同学去解决，比如（PM、后端、测试）方向同学，能让大家看到你的付出，但不要默默做事，还是要让自己的老板看到。这样在最后评价的时候也是可以体现出来的。

高阶

对于一个高级工程师来说，如果想有所更进一步，在我看来，就不要再局限于眼前前端的角色，要从角色认知里跳出来。你不再是一个前端，你可以带领一个小团队，能够为项目注入灵魂，在项目开发协作整个流程，作为一个中间人，将这个流程串联的完美。

那就需要具备一些前提条件，你的前端扎实要过硬，另外需要一些软实力，例如沟通协作，架构设计能力。越往上爬之后，写代码的时间越少，现如今人才依旧很稀缺，尤其是能够从上层帮助团队做 Review 和未来规划的人。你不仅仅只去写代码，更要为小组内每一个设计好他们的方向。能够让老板安心的把事情交给你。

资深

作为一个资深工程师，如果再想往上爬，如果要到 Team Leader 的话，一是说自己要有足够的能力，比如证明自己能带领一批人，打出一片天，另外一个是机遇，要有坑位留给你。

那如果说要成为技术专家的话，多多少少是要有一些技术影响力，或许是经常出现在大家眼中，可能是网红（做技术布道，经常出现在各个前端大会的舞台作为嘉宾），或者是在开源方向有一些自己的特色，比如正在为前端的未来做一些事情，为一些前端 Rust 工具贡献代码，或者是做了一些框架第三方包，补齐框架生态，总之是通过一些成绩，证明了自己技术的硬实力。

自我总结

说了这么多，总结一下自己今年的一些突破：

• 从 0 到 1 开发了一款公司内部使用的 VSCode 插件，并进行推广，1k+ 下载量
• 与各大业务 BP，提升了沟通技巧，推广了插件系统的使用量到内部 UV 500+
• 完成了一次公司范围内技术产品宣讲，投稿公司内刊物文章，提升了些许行文水平
• 开始涉足 Low Code / No Code 领域，沉迷工具、架构方向的我，再次找到了新世界
• 落地 e2e，在公司内建设了自动化测试，覆盖了 CI / CD 流程，降低了项目测试回归成本

2024，希望自己上半年能够把 Nest、Golang 啃一啃，继续增加服务端领域的知识，具备更多的硬实力，也希望自己软实力有进步

趋势 - 全链路 AI 化

说完了自我提升，聊一聊 AI，2022 年爆火了 ChatGPT，其实早就有苗头，作为一名 Dota2 粉丝，TI9 有一个环节是 OpenAI 挑战现实职业玩家，虽然限制了一些条件，但是还是 2:0 赢了 OG。

在 2023 年中国各大互联网纷纷发力投入 AI，字节也是最近全力投入 all in AI，各个基建未来都要拥抱 AI。在 bilibili 上可以看到每个视频多一个 AI 视频总结，可以看到各个互联网公司都视 AI 为未来。

对我们来说，也可以去拥抱 AI 带来的便利，比如用 AI 写代码，github 的 Copilot、VSCode Tabnine 插件在某些领域做的还是不错的。

但是我并不觉得 AI 能完全替代程序员，他们不能做到功能的交付，仅仅是可以做提效工作，只要你掌握核心技术了，对各个公司来说都是追捧的人才。

如何打磨好前端工具？

2023 年是忙碌的一年，是自己开始前端开发工作的第三年，从对前端各个技能点懵懂的状态，逐渐点上了更多的技能树。

在经历了从 0 到 1 在公司内落地插件市场之后，就开始了增强插件开发体验的工作，这里就涉及一个产品的打磨过程。

对于前端工具链来说，可以看到一个趋势，大家都在从以下两个角度迭代：

使用体验 - 好用

如何让一个工具变的好用？

首先，为什么会出现前端工具，因为我们遇到了一些问题。为了规范化代码，出现了 ESLint 工具，但是手动 fix ESLint 报错的规则，很耗费时间，那么就出现了 ESLint 的 CLI 来做 auto fix 的事情。

紧接着，用户感受到 CLI 的体验仍旧不是很好，因为无法可视化的修复问题，所以就出现了 VSCode 插件，在 hover 报错时，能够单独针对每一条报错进行 auto fix。

对于 ESLint 插件就到此为止了，但是对于公司内，有没有新的思路呢？

于是，为了能够完全可视化的去修复问题，公司内出现了 ESLint VSCode 侧边栏插件，能够看到 ESLint 错误的树结构，批量修复问题，这也解决了 hover 时单个修复问题的费时与不方便。

上面举的这个例子其实和 git 的演变是类似的。

总结一下就是：手动 - 自动 - 可视化（GUI）

使用效率 - 提效

我相信很多人会觉得 Webpack 的打包速度很慢，随着不断迭代，Webpack 的仓库也已经变成一个庞然大物，为了优化打包性能，大家纷纷从 ast-parser 角度出发，使用其它语言编写 js parser，这里有几个代表库是：

• SWC
• ESBuild

不过以上两个包，仅解决了一定的问题，他们只是 Webpack 构建中的一环，依赖图构建以及插件系统的运行都在 Webpack 内运行，为了解决这个问题，公司内部决定开发 Webpack 的平替 Rust 版 Rspack 来突破构建速度的瓶颈，大厂的开源项目，从基建的角度来服务于整个前端生态，社区还是愿意买单的，可以看到 storybook 就率先接入了 Rspack 做构建。

在 Rspack 上线之后，也发布了一系列的周边，比如 Rspress，字面意思就可以看出来是 VuePress、VitePress 的竞品，无论从哪种角度看，都是在做提效。

从 Evan 分享 Vue / Vite 后续规划，也可以看到 Rolldown 这个产品在紧锣密鼓的开发中，其实也是基于 Oxc（之前部门同事做的 Rust 版 js-parser）的上层使用，终极目的也是为了让 Vite 能够更加成熟，抹平生产与开发态的差异，进而去替代 Webpack。

无论是 Vite 和 Rspack，发力点都是合理的，是未来前端革新的趋势。

归根结底，前端届逐渐 Rust 化的原因还是 JS 太慢了，一个早期花了几十天设计出来的语言，又带着沉重的历史包袱，想快起来都难。

最后

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果近期准备或者正在找工作，千万不要错过，我们的题库主打无广告和更新快哦~。

老规矩，也给我们团队的辅导服务打个广告。

原文链接：https://juejin.cn/post/7307098426097008703