前端工程化
前端工程化
- 前端工程化 = 前端 + 软件工程
- 将工程方法系统化的应用到前端开发中
- 系统，严谨，可量化的方法开发、运营和维护前端应用程序
- 基于业务诉求，梳理出最符合当前需要的架构设计
工程化发展
- B/S 架构，前后端之分
- 模块化： IIEF -> AMD -> CMD -> COMMONJS -> UMD -> ESM
- 自动化：管理&简化前端开发过程，前端框架、自动化、构建系统应用而生
- 最佳实践：基于业内最佳实践，挺开箱即用的框架、工具体系简历
- 好、快、稳：依赖 vite、esm、easm、低代码等能力
准备阶段
- 技术选型
- 代码规范
- 分支管理
- 项目初始化
- UI 规范
- 物料市场规范
- 开发阶段
- 开发、打包流程
- 本地 mock 服务
- 代码质量
- 单元测试&E2E 测试
- 发布流程
- git commit 规范
- changelog 规范
- 打包构建
- 部署、验收
- 监控
工程化实现步骤
准备阶段：项目初始化
开发阶段： - 开发、打包配置 - 本地 mock 服务 - 代码质量保障 - 单元测试
发布交付阶段 - commit、changeLog - 打包构建 - 部署验收 - 物料管理
打包发展流程
- 初版构建工具
- 现代打包构建工具-webpack
- 基于webpack改进的构建工具 parcel
- 突破js语言特性的构建工具 esbuild swc
- 基于 ES Module 的 bundleless 构建工具 snowpack vite
AST 抽象语法树
用处
编译器：compiler
从一种语言转换成另外一种语言
jsx -> babel -> js es6+ -> es5
- less/sass
- ts/coffescript
- eslint
基本思路
- parser 1.词法分析 lexical analysis
- token
- 去除注释空格回车等无效字符串
- 生成方式 - 正则分析：需要大量正则语言、正则间可能有冲突，维护成本比较高，适合简单的语言模板 - 使用自动机：有限状态自动机：在有限的输入中，可以将状态转义，最终能够达到最终状态 2.语法分析 syntactic analysis
- AST: 抽象语法树
babel: es6+ -> Babylon.parser -> AST -> babel.traverse -> 新的 AST -> ES5
- transform
- 代码转换 从一种 ast->另一种 ast
- 特点
- 可移植性，跟宿主环境无关，可以通过中间语言生成不同端的语言
- 数据结构清晰
- generation
- 递归生成 AST
- compiler
脚手架
面试问题
- N数之和
- 走台阶
- 快排
LeetCode 50+
前端工程化有哪些实践?
1.技术选型:主要指基于什么原因，选择哪种前端框架: React、Vue、Angular (对微应用的理解)
2.规范统一
a.git hooks、git commit配置
b.eslint配置:
c.项目结构规范: CLl;
d.UI规范: 组件库的选择、开发与使用:
3.测试: Jest的使用，与其他框架的对比:
4.构建工具: webpack、rollup、vite的选择:
5.部署:
a.使用Jenkins构建前端项目并部署到服务器
b.如何使用github action 或者gitLab action关联项目
6.性能监控:
a.前端监控的理解与实践，performance的使用:
b.数据上报的方式
c.如何上传错误的sourcemap;
d.无埋点:
7.性能优化:
a.加载时性能优化: lighthouse、HTTP、CDN缓存、SSR:
b.运行时性能优化: 重绘重排、长列表渲染:
8.重构:为什么要重构，如何重构，重构的思想:
9.微前端:针对巨石项目如何支持
10.serverless: 什么时候使用serverless: