团队技术栈规划

小菜前端的技术栈是如何规划和演进的

前端工程化

软件工程化关注的是性能、稳定性、可用性、可维护性等方面，一切以这些为目标的工作都是"前端工程化"。

• 模块化
• 组件化
• 规范化
• 自动化

微前端

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

微前端-最容易看懂的微前端知识

微前端入门

前端监控

• 数据监控
• 性能监控
• 异常监控

一般采用无埋点方案，前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。优点是前端只要一次加载埋点脚本，缺点是流量和采集的数据过于庞大，服务器性能压力山大。

前端监控和前端埋点方案设计

JS 压缩混淆

• 压缩：删除 Javascript 代码中所有注释、跳格符号、换行符号及无用的空格
• 混淆：经过编码将变量和函数原命名改为毫无意义的命名（如function(a,b,c,e,g)等），以防止他人窥视和窃取 Javascript 源代码，也有一定压缩效果。变量替换，需要维护一个对应的 hash 字典。

反调试

• 函数重定义：设置 console.log 为空函数等
• 循环断点：while(true) eval("debugger")
• 等

JavaScript反调试技巧