熟悉 Javascript、ES6、CSS3 和 HTML5, 掌握 W3C 标准的代码
熟悉 Vue2/3 框架,对 MVVM 能快速上手, 熟悉 Vuex,Vue Router
了解 前端工程化,Webpack/Rollup/Vite 构建工具,并能进行打包优化
了解 微信小程序开发开发
了解 Hybrid 混合开发,Nodejs,使用 Git 对代码进行版本管理
项目一:APP、微信H5,一码两端
* 负责组织前期前端项目架构搭建,选用 Vue2 生态,提出利用 Webpack 对一套代码提供2种模式的打包脚本,输出两个产物分别对应 1.多页面运行在 mpass 的 APP 环境 2.单页面运行在浏览器的 H5 环境,建立一层抹平 API,从而实现一码两端的 web 架构方案。
* 其中因为 APP 可以提供一些特殊API用于页面返回传参数和做相应的回调逻辑,在 H5 端为了实现返回触发回调函数,需要手动记录单页路由历史栈,利用路由守卫 beforRouter 触发相应逻辑,并在实例化 Vue 时全局注入一个自定义生命周期语法,方便编写接收参数逻辑,和回调逻辑
* 添加一层抹平层,在不同模式的构建脚本中动态加载 JSBridge,由 H5 配合 APP 现有基础 API 做兼容,推动团队使用函数式编程,实现各种原子函数可以最大程度复用,并利于 tree-shaking,最终实现轻量、按需加载、可复用的工具库。
项目二:简易版微前端内管平台及低代码配置功能
* 负责前期项目架构搭建,在现有2个前端应用:易方达内管前端(vue-cli + vue2 + antd)、楼层搭建相关的内管前端应用(webpack + vue2 + elementui)的前提下,添加主/子应用通知以及共享缓存机制,使用 iframe 实现整合多个内管应用的简易微前端架构,实现独立开发、独立部署、独立运行。
* 其中因为可配置的楼层种类越来越多,楼层页面体积增大,白屏时间会持续增加。利用打包工具对 import() 的代码分割改造为异步加载组件,以及未滚动到视图时不加载不渲染楼层,使无论楼层数量多少,白屏时间都减少了50%。
项目三:内管系统项目
* 作为前端组长,组织将现有 Vue2 多页面项目打包工具由 Webpack2 升级到 Webpack5,babel6 升级到 babel7 等等,babel 、postcss 配置重新指定要兼容的浏览器版本,按需转译,并重新规划分包策略把 vendors 资源拆分利于缓存,并实现多页面按需构建,而不再全量部署,提高部署效率
* 前端构建同时打包出 gzip 文件、引入 Serviceworker、优化 HTTP 缓存策略、构建步骤添加生成缩略图 loader 实现渐进式图片加载、修改加载第三方库如 Swiperjs、富文本编辑器为异步加载。最终构建速度在只需打包其中一个模块的情况下比全量构建速度提升 60%。本地开发情况得益于 Webpack5 的缓存功能,二次启动由原来的 30+ 秒缩短到 10 秒内。对于有大型第三方库以及多图的页面首屏速度提升30%。
* 负责组织前期前端项目架构搭建,选用 Vue2 生态,提出利用 Webpack 对一套代码提供2种模式的打包脚本,输出两个产物分别对应 1.多页面运行在 mpass 的 APP 环境 2.单页面运行在浏览器的 H5 环境,建立一层抹平 API,从而实现一码两端的 web 架构方
* 作为前端组长,组织将现有 Vue2 多页面项目打包工具由 Webpack2 升级到 Webpack5,babel6 升级到 babel7 等等,babel 、postcss 配置重新指定要兼容的浏览器版本,按需转译,并重新规划分包策略把 vendors 资源拆分利于缓存,并实