-
前端架构@苏州XXXX医疗科技股份有限公司1年（在职中）
- * 主要负责公司前端项目重构进程中的技术选型和框架搭建，以及UI组件库二次封装和对应组件库文档编写。
- * 统一了前端项目代码规范，普及一些代码最佳实践，提高代码的可维护性，可读性和性能。
- * 推进代码风格检测，优化Webpack 4项目编译时间和产物大小。
- * 配合公司研发规划，协助后端同事解决项目开发中所遇到的的难题。
-
高级前端@沈苏科技（苏州）股份有限公司1年
- * 同步开发了犬伤接种，儿童疫苗接种，以及新冠接种，为彼时公司抢占新冠接种市场提供了支撑。
- * 推进公司对蓝湖和IconFont等工具的使用，增强了前端和设计同事之前的连接。
-
高级前端[技术带队]@上海才查到科技有限公司2.25年
- * 主要负责公司核心产品"财查到"APP内H5页面的业务迭代，处理大部分前端产线问题。
- * 在团队内起到技术带队的作用，增强项目管理，提高团队编码能力。
- * 优化webpack3项目编译时间，封装方法库，减少APP中全量/增量H5资源包的大小。
- * 参与过公司一个区块链APP外包项目的研发（使用react）。
-
前端主程@苏州三牛文化传媒有限公司1.5年
- * 独立负责公司"拍立享"相册H5页，"我是摄影狮"，"约拍"小程序以及其他各类落地页的前端开发。
第1页
李锦的前端简历
1年项目架构经验，2年技术带队经验。
丰富的移动端调试经验。
责任心强，有工匠精神和轻度代码洁癖。
重视工程化，擅于编写高可维护性的代码。
学习能力强，能根据工作环境工作内容进行快速学习。
有一定的服务器运维能力和快速部署项目的能力。
- 第2~4页
- 第5~6页
第2页
项目经历：Medical-IM（即时通讯PC+WebView）
2021.9~至今
-
这是一个即时聊天IM系统，支持即时信息聊天，发送文字，语音，图片等文件，同时支持语音/视频通话功能。项目难点在于多用户之间的相互连接，上下线通知，视频通话时接通挂断处理，很容易出bug，不过在同事的支持下，成功将此项目嵌入到公司的各个项目中，替代了原本原生工程师开发的即时通讯系统。这段时间里，主要做了以下事情：- * 抛弃轮询方案，使用WebSocket建立通信通道，实时相互传输数据，包括但不限于上下线，心跳检测，音视频流传递。
- * 制定代码规范，渐进式引入Prettier + ESLint强制检测代码风格，减少一些低级错误的发生。
- * 适配了移动端的安全区，侧滑返回等特性，兼容PC端时，增加了消息桌面提醒，断线自动尝试重连。
第3页
项目经历：Medical-CLI + UI（脚手架+UI库）
2021.9~至今
-
这是一个使用 Vue2 + AntDesignVue-UI + Webpack4 的脚手架项目。我主要负责项目的架构，在与同事和公司产品销售路线的磨合中，多次迭代并确定了脚手架的方向，以及对UI库进行了二次封装，通过配置式开发快速实现表格，表单等组件的快速渲染，以及增加了对一些新特性语法如可选链的支持和用Git Hooks统一了团队Git提交规范和代码风格。同时由于老项目短时间内仍将存在，但老项目开发和编译用时长，严重影响了开发/部署效率，故对老项目进行了编译优化。
本次优化前后核心数据对比结果见上图，其中最有意义的数据是以下3个：- * dev热更新时间：从16秒降至不到1秒，降幅超93%，显著提升了开发效率。
- * build时间：从近6分钟降至1分12秒，降幅超79%，提高了测试/生产环境的发布效率。
- * build产物大小：从90.2MB降至22.3MB，降幅超75%，提升了用户体验（开启gzip后仅4MB）。
主要的优化点有：- * 减少无意义的资源引用（效果拔群⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐）
- * 合理设置webpackMode（效果拔群⭐⭐⭐⭐⭐⭐）
- * 升级部分插件（效果一般⭐⭐⭐）
- * devtool的值注意一下（效果一般⭐⭐⭐）
- * 更换压缩插件（效果较好⭐⭐⭐⭐）
- * 关闭SourceMap（效果好⭐⭐⭐⭐⭐）
- * 提取公共代码（效果好⭐⭐⭐⭐⭐）
- * 使用CDN、DLL、缓存（拿空间换时间，效果一般，且不适用于医院内网环境⭐）
- * 使用Babel缓存（牺牲首次编译的时间换取后续编译的提速，效果一般⭐）
第4页
项目经历：财查到（APP+后台系统）
2018.3~2020.9
-
在职期间，由于原有项目的繁杂，备注的缺失，且为了提高前端应用质量，解放生产力，便着手对项目架构也进行了一系列优化：
- * 原有项目使用Svn作为版本管理工具，考虑到公共分支的保护和移交项目的管理，明确定义产品发布的周期，于是选择自建Git服务后将项目全部迁移至Git，项目遵守规定的分支管理规范、commit规范，并辅以Git钩子加强约束，新的变更代码提交 (上传到代码仓库 git push)之后，通过Github Actions自动化的方式自动完成项目工程的构建、集成等工作，并生成最终的发布产物。
- * App项目均采用自适应布局，PC端项目均采用响应式布局，兼容性针对不同平台进行统一处理，开发体验趋于一致。
- * 另增新vendor仓库，编译出的js供其他项目复用，组件或者方法改动均在此仓库中修改，有效减少了冗余代码。
- * 同类项目上线均采用二级目录形式，以继承首页权重，增加网站收录量。
- * 将低频使用页面，从APP端本地web资源中挪到远程web资源中。
此外，由于是hybrid APP，由原生和前端团队公共维护，前端团队负责其中的web部分，web部分按访问协议分为2类：- * 远程通过https://协议访问的web页面：发布简单、访问慢
- * 打包到APP本地通过file://协议访问的web资源包：发布麻烦（涉及增量/全量包概念）、访问快
对项目进行了一系列技术优化，比较突出的点有：- * 减少APP内H5资源包的全量包和增量包大小，其中一个子项目优化后编译产物大小缩减了78%（4.6M=>1M），编译时间缩减了87%（150秒=>20秒）。
- * 对于1个项目里输出产物需要同时用于多处但每处又不完全一致的情况，支持根据路由配置（示意图见下页附图2）实现编译一次按模块/页面精度输出多份不同产物，避免需要编译多次的麻烦。
- * 通过条件编译的方式，将编译最慢的一个大型webpack项目的编译时间由15分钟缩短到5分钟以内。
而针对相关落地页的SEO，部分页面结合Nuxt，使用ssr服务端渲染，部分项目则使用 Webpack 的prerender-spa-plugin 插件结合 vue-meta-info 实现预编译，在生产环境打包生成静态的 HTML。（附图3）。
第5页
项目经历：财查到（APP+后台系统）
2018.3~2020.9
附图1：前端项目自动构建打包
附图2：前端项目独立模块打包示意图
附图3：网站SEO
第6页
项目经历：拍立享相册 + 我是摄影狮
2016.12~2018.3
-
拍立享直播相册在开发中，以自己的思路，未依赖第三方库用原生js写出了不会重叠，速度可控的弹幕功能。同时在此项目中便对项目的优化做了思考。- * 利用UglifyJs进行了代码压缩，混淆。
- * 针对相册必有的多图加载问题进行了瀑布流美化，图片懒加载优化。
我是摄影狮这个小程序项目，是脱离传统开发中Bootstrap和jQuery后的第一个项目，也为后续的约拍小程序打下了基础：- * 实现了在当时颇有难度的海报打水印分享的功能。
- * 实现了打赏支付以及提现等功能。
兴趣相关：博客、站点集群
www.sob.im
-
- * 个人博客，访问链接：https://blog.sob.im/。站点刚起步，坚持记录一些生活，兴趣，技术的内容在上面是我目前一个长远的计划。
- * 站点集群导航页，访问链接：https://nav.sob.im/。自建的一些站点会在导航页提供入口。
- * 我的图床，访问链接：https://imgs.sob.im/。支持图片上传，以及后台的简单管理。