Yard


再谈前端工程化

时隔一年,再来谈谈前端工程化的问题。 我认为,一切和前端有关的问题都是软件工程的问题。 这里只是简单列了一些提纲,每一点细说起来都能说好久。

总结下来只有三点。

  1. 提高工作效率。
  2. 减少出错概率。
  3. 增强用户体验。

1. 如何提高效率?

  1. 提高代码复用率
    1. 私有npm仓库实现代码复用。
    2. 对不同项目和需求方统一制定基本元素。
    3. 从组件化、模块化、模板化入手,一步一步精简和复用代码。
  2. 自动化构建与部署
    1. git工作流。
    2. Jenkins 或者 gitLab CI的自动化构建。
    3. docker镜像化。

2. 如何防止出错?

  1. ESLint语法检查。
  2. TypeScript类型检测。
  3. 单元测试。
    1. util库 Jest JSDom 各类数据操作和BOM的操作和校验
    2. ui库 Jest Enzyme 校对 dom 和css
  4. 集成测试。
    1. 服务强度测试(压测)
    2. 浏览器兼容性测试 (webdriver)
    3. 业务流程测试(较少,且成本高于收益)

3. 用户体验

  1. 首屏加载时间
    1. react SSR
    2. SSR cache(Page Level or Component Level)
  2. 网络请求优化
    1. 首次加载同一域下最多6个请求
    2. 启用http2 静态资源存cdn
    3. 未在首页图片异步加载 lazy load
  3. 缓存利用
    1. 200 和 304 缓存
    2. localStorage 存储JS