• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
社会优先于个人
博客园    首页    新随笔    联系   管理    订阅  订阅
1.4 前端工程化--阅读笔记

前端工程化

是最近几年才兴起的一个方向。之前前端的业务逻辑比较简单,前端资源作为web服务器的一种附带,没有必要搞专门的工程化。在其他开发领域早就高度工程化了,比如web服务器开发。

前端工程化的目的

提高效率,解放生产力。通过制定规范,借助工具和框架,解决一些痛点和难点和一些重复性劳动。

前端工程化的衡量标准:快,准,稳。

  • 提高开发速度
  • 尽量减少一些逻辑错误,减少测试时间
  • 角色分工,准确定位bug责任人

前端工程化进化历程

混沌形态:

前端写demo后端套模版写逻辑。这时是串行合作的。前端的产出的除了css资源外,其他都要后端二次加工。这时其实是没有前端工程化的。

前后端分离形态:

  • ajax改变了web交互模式,以前是要刷新整个网页的,后端发送一个新的html文件,这时可以实现异步请求数据,局部刷新。这时js,css,html全部交给了前端。这时前后端分离还是有很多其他问题:
	开发角度:
	1. es规范和浏览器兼容问题。
	2. css弱编程能力
	3. 资源定位,比如开发阶段图片资源在本地,上线后,手动改成真实的url
	4. 图片压缩
	5. 模块依赖,压缩打包
	
	协作角度:
	6. 数据接口
	
	部署角度:
	7. 前端的文件需要后端部署
  • 构建:将所有工具的功能整合并统一为规范的工具栈,解决以上开发角度问题。比如使用babel,sass预编译,commonjs模块化,图片压缩。
  • 本地开发服务器:不是一个工具,而是一个真正的服务器。最典型的应用是mock服务,实现前后端并行开发。有云mock的话,就不需要本地mock服务了。解决以上协作角度问题。能实现浏览器自动刷新功能。
  • 动静态资源分离部署:解决以上部署角度问题。注意浏览器缓存策略

spa:将html渲染工作交给了前端

  • 优点:
  1. 前端掌控路由,比后端掌控路由用户体验更好
  2. 可以移植,可以离线使用
  3. 服务器端的数据接口,可以高度复用
  4. html作为静态资源,容易部署
  5. 前端和后端工程师,可以使用svn或者git维护各自的代码,无需耦合
  • 缺点:
  1. 不利于seo
  2. 注意html文件的浏览器缓存策略

前端工程化的3个阶段

本地工具链

  • 前端工程化的定义:一系列工具和规范的组合
规范包括:
- 项目文件的组织结构,
- 代码的开发范式,比如模块化方案
- 工具的使用规范,比如工程化自身的配置方案
- 各阶段环境的依赖,比如部署功能的实现需要目标服务器提供ssh权限
  • 这时是初级阶段,整合工具,提供统一的规范的工具栈,均在本地环境下工作
  • 解决了开发人员学习和使用工具的成本

管理平台

  • 本地工具链受到环境差异的影响,比如操作系统,版本,内核。安全性问题,比如人人都能想生产环境部署文件。
  • 管理平台的工程化,优点
- 淡化环境的差异性,保证构建产出的统一性
- 权限集中管理,提高安全性
- 项目版本集中管理,便于危机处理
  • 管理平台将各个功能模块的执行环境集中化

持续集成

  • 管理平台的前后端的工作流是分离的,但是前端毕竟是web的一个子集,最终会与整体工作流结合
posted on 2022-03-10 22:01  社会优先于个人  阅读(49)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3