前端工程质量保障

前端工程质量优化： 构建优化：构建分析，解析优化、并行构建、缓存； 体积优化：体积分析，公共代码提取、TreeShaking等； 性能优化：性能分析，CDN加速，按需加载； 服务端渲染； 预编译优化；

前端页面资源保障机制： 资源防劫持保障：标记过滤法、CSP配置、使用 HTTPS、防止嵌套； 资源加载异常监控和处理：资源重试、多域名切换容灾方案、资源离线化；

通过请求监控保障前端页面质量。 请求采集和上报：拦截请求方法进行信息采集； 检测高并发请求、重复请求、异常请求、被取消的请求、高延迟请求； 恶意爬虫的识别和防御措施；

性能监控：性能API、核心性能指标； 异常监控：错误采集、SourceMap； 页面崩溃监控：心跳检测； 白屏监控：异常/实时白屏检测； 卡顿监控：FPS； 用户行为监控：事件监听、录播回放

前端部署：覆盖式发布、非覆盖式发布； 采用动静分离部署，以及静态资源的CDN加速； 使用灰度发布进行平滑部署

持续集成工具：Jenkins。 使用Jenkins持续集成，拉取代码、代码检测、安装依赖、构建、部署

前端测试流程：单元测试、功能测试、集成测试、端到端测试； 单元测试指标：代码覆盖率； 前端自动化测试工具：Jest、Cypress、LambdaTest等；

组件设计规范：设计语言规范、研发设计规范 组件构建打包：模块规范、全量引入和按需引入 组件发布规范：语义化版本规范

代码质量指标：可读性、可扩展性 代码管理：代码规范、代码格式化、工程目录结构设计、类型约束； 接口管理、代码质量平台、代码托管

使用Git满足前端工程质量保障： Git提交规范：Conventional Commits； Git分支管理模式； Git常用工具；

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。 它的核心概念包括入口、输出、加载器、插件； 它提供了强大的开发环境功能：实时重新加载、HMR

CSS相关的工程化技术： PostCSS可以对CSS进行处理和转换； 使用Sass等扩展语言为CSS引入变量、函数等编程语法； 样式隔离方案的工作机制以及优缺点；

使用React开发框架搭建项目； React的基本概念：组件、Hook； React Router路由控制； React状态管理方案

在工程搭建中使用TypeScript类型约束，提升质量保障； TypeScript基础知识：基本类型和类型操作； TypeScript的配置；

如何通过前端工程化提供质量保障。 从工程搭建、版本控制、代码质量、组件建设、测试保障、持续集成、系统部署、页面监控、请求监控、资源保障、工程质量优化等方面入手，覆盖前端研发流程的生命周期

通过前端工程化的历史，了解各种前端技术的演变； 前端工程师的重大技术突破：AJAX技术、Node.js；