再谈前端工程化
时隔一年,再来谈谈前端工程化的问题。 我认为,一切和前端有关的问题都是软件工程的问题。 这里只是简单列了一些提纲,每一点细说起来都能说好久。
总结下来只有三点。
- 提高工作效率。
- 减少出错概率。
- 增强用户体验。
1. 如何提高效率?
- 提高代码复用率
- 私有npm仓库实现代码复用。
- 对不同项目和需求方统一制定基本元素。
- 从组件化、模块化、模板化入手,一步一步精简和复用代码。
- 自动化构建与部署
- git工作流。
- Jenkins 或者 gitLab CI的自动化构建。
- docker镜像化。
2. 如何防止出错?
- ESLint语法检查。
- TypeScript类型检测。
- 单元测试。
- util库 Jest JSDom 各类数据操作和BOM的操作和校验
- ui库 Jest Enzyme 校对 dom 和css
- 集成测试。
- 服务强度测试(压测)
- 浏览器兼容性测试 (webdriver)
- 业务流程测试(较少,且成本高于收益)
3. 用户体验
- 首屏加载时间
- react SSR
- SSR cache(Page Level or Component Level)
- 网络请求优化
- 首次加载同一域下最多6个请求
- 启用http2 静态资源存cdn
- 未在首页图片异步加载 lazy load
- 缓存利用
- 200 和 304 缓存
- localStorage 存储JS