2 为什么要提前端工程

• 2.1 传统开发

  • 切图 -> 套页面 -> 后端模板引擎(前后端耦合、难维护等等)

• 2.2 现在的前端

  • 前端范畴不断扩大（多端）
  • 前后端分离(前端模板引擎)
  • 模块化开发(面向业务)
  • 组件化开发(脱离业务、细粒度、可复用)
  • 编译原理在前端大放异彩

3 讨论：前端工程化体系

4 前端工程化体系（大前端）

• web 应用开发层
  • 分治（模块化、组件化）
  • 前后端彻底分离（Mock Server、JSON Server）
• Node 服务层
  • Model、Router、View
• 前端运维层
  • Lint(StyleLint、ESLint)
  • Unit Test(Mocha)
  • CD
  • CI(Gitlab-CI、Docker)
  • Bootstrap(Forever、PM2)
  • Monitoring(Keymetrics.io、Sentry.io)

5 asset.json

{
  "index": {
    "main.css": "static/css/main.ad87bbd6.css",
    "main.js": "static/js/main.a3907cec.js",
    "static/media/yay.jpg": "static/media/yay.44dd3333.jpg"
  },
  "club": {
    "main.css": "static/css/main.ad87bbd6.css",
    "main.js": "static/js/main.a3907cec.js",
    "static/media/yay.jpg": "static/media/yay.44dd3333.jpg"
  }
}

6 FE-Project 的发布

• 6.1 原始发布

6 FE-Project 的发布

• 6.2 增量发布

6 FE-Project 的发布

• 6.3 动静分离的CDN节点发布

6 FE-Project 的发布

• 6.4 覆盖式发布的痛点

  • 先部署页面，再部署资源
  • 先部署资源，再部署页面

6 FE-Project 的发布

• 6.5 非覆盖式发布

7 web 应用上线、更新的部署

Thank You

• 参考资料

  • 浅说前端工程化
  • 张云龙：前端工程
  • 浅析前端工程化
  • 肉山·察：前端工程化体系