前端工程化的理论

这是一次面试题的理论部分，偏向前端工程化部分，记录一下

一、 你使用过哪些前端框架/类库，其各有什么优缺点？

前端框架整理

二、如果需要使用你熟悉的技术封装一套前端的框架，你怎么规划？

框架方案: Typescript+Next.js + AntD React + Mbox +koa

Next.js
需要构建、打包和运行等开发工具配置，比如使用 Babel 转换使用了新特性的 JavaScript 代码、处理 SASS 和 LESS 样式文件等。开发功能时，除了构建界面，还需要处理页面路由、获取服务端数据、管理应用状态等。为了让应用对搜索引擎友好，最好支持服务端渲染。

UI库：AntD React

状态管理：Mbox

服务端渲染/Node中间件转发：Koa

css样式：styled-components

tslint规范：遵循tslint规范, vscode可以使用 TSLint 插件， webStorm自带但需要配置

三、前端代码怎么打包发布，怎么理解工程化，在”工程化”过程中需要注意些什么？

公司运维一般会开发发布平台，如果自己玩发布的话一般是Docker镜像容器映射gitLab/gitHub对应仓库，发布至服务器上

工程化的概念：
第一阶段：库/框架选型（React/Vue/Next）
第二阶段：简单构建优化（Grunt/gulp）选择一种构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并
第三阶段：JS/CSS模块化开发，JS模块化方案很多，AMD/CommonJS/UMD/ES6 Module、React等
第四阶段：组件化开发、静态资源管理

四、前端性能优化需要考虑哪些方面？

优化方向	优化手段
请求数量	合并脚本和样式表、css Sprites、拆分初始化负载、划分主域
请求带宽	开启GZip, 精简JavaScript,移除重复脚本，图像优化
缓存利用	使用CDN,使用外部JavaScript和CSS，添加Expire头，减少DNS查找，配置ETag,使Ajax可缓存
页面结构	将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验	避免CSS表达式，避免重定向

五、如何看待前后端协作，scrum是一种什么模式？

1、 敏捷开发的方法也有很多，主要包括极限编程（XP）、Scrum、水晶方法（Crystal Methods）、自适应软件开发（ASD）、特性驱动开发（FDD）、动态系统开发（DSDM）、轻量级RUP、测试驱动开发（TDD）等等。而在众多的敏捷开发方法中，尤以实施Scrum比较流行。

2、 Scrum 是一个用于开发和维护复杂产品的框架，是一个增量的、迭代的开发过程。在这个框架中，整个开发过程由若干个短的迭代周期组成，一个短的迭代周期称为一个Sprint，每个Sprint的长度是2到4周。

在Scrum中，使用产品Backlog来管理产品的需求。产品backlog按照实现的优先级进行排序，以商业价值作为排序的主要原则。在Sprint中，Scrum团队从产品Backlog中挑选最高优先级的需求进行开发。挑选的需求在Sprint计划会议上经过讨论、分析和估算得到相应的任务列表，称它为Sprintbacklog。当Scrum团队完成Sprintbacklog列表中的所有任务时，本次Sprint结束，进入下一个Sprint迭代周期。

3、 Scrum的主要作用包括：

• Scrum能够保证优先开发对客户具有较高价值的需求，更好的满足用户的需求，
• 与瀑布流程下的开发方式相比较，通过实施Scrum，能够提升团队一倍的开发效率，最大限度的发挥团队的作用
• Scrum能够缩短开发周期，提高项目的交付效率