论前端工程化

[ChelesteWang]

前端工程化是用软件工程手段去提高前端的工作效率，为了开发更易维护更健壮的程序，并且提高程序的性能、稳定性、可用性。 从代码规范到研发工具链，到 CI/CD 平台让开发人员减少更多手动进行重复性的工作。并实现团队内的统一。 我认为前端工程化是业务发展的必然产物，随着业务规模的增加，需要从工程管理以及人员协同进行约束，从指定开发团队规范到脚手架以及 CI / CD 流程，再到 serverless 以及低代码都是希望，可以提升开发的效率，让开发人员更多的关注于业务产品本身。能不让人做的就不必让人参与。

[ChelesteWang]

工程化研究的主要内容

• [x] 开发提效
• [x] 构建提效
• [x] 部署提效

[ChelesteWang]

开发提效

开发提效主要在于团队开发中的沟通成本以及软件开发的维护成本。以及提供开发中封装可复用的工具集。

常用工具

常用工具包括脚手架 、组件库 、逻辑库（hooks，请求库等）、mock 工具

脚手架

• 编写统一的项目模板（项目初始化使用，约束团队代码规范，最佳实践等）避免初始化项目的重复操作
• 根据使用对模板以及构建流程进行优化（关注点集中在构建提效以及技术栈相关配置）
• 统一团队技术栈与工程结构可以更方便对接团队基础设施（CI/CD）
• 提供可扩展方式以便于适应业务发展

[ChelesteWang]

构建提效

这个阶段主要围绕我们的打包工具进行研究从 webpack 到新的 bundleless 打包器 vite ，或者使用 esbuild-loader 加快处理 JS 的速度，swc 替代 babel 转译等等都是构建提效的一部分

webpack 构建流程

webpack 性能优化

• 打包文件大小
  1. 减少执行编译的模块。
  2. 提升单个模块构建的速度。
  3. 并行构建以提升总体效率。
• 打包整体耗时
  1. 编译提速
  2. 打包提速

[ChelesteWang]

部署提效

打通优化适合前端项目的 CI/CD 部署流程，提升整体开发测试效率，自动测试，预发环境，测试环境，生产环境，每一个构建都有快照，上线如何进行流量控制等。这一块就涉及到容器化以及服务化相关知识了。

前端部署流程

• 获取代码：从代码仓库获取项目代码，并切换到待部署的分支或版本。
• 安装依赖：安装项目构建所需要的依赖包。
• 源码构建：使用构建工具对项目源代码进行构建，生成产物代码。
• 产物打包：将部署所需的代码（通常指的是构建后的产物代码，如果是部署 Node 服务则还需要其他目录与文件）打成压缩包。
• 推送代码：将待部署的文件或压缩包推送至目标服务器的特定目录下，如果是推送压缩包的情况，还需执行解压。
• 重启服务：在部署 Node 服务的情况下，在代码推送后需要进行服务重启。

本地部署的问题

• 环境不一致
• 产物不可回溯（部署系统可以回滚以及记录日志）
• 流程复杂手动控制容易出错

[ChelesteWang]

依赖安装的基本流程

在对影响效率的问题进行分析之前，我们需要先了解一下前端依赖安装的基本流程阶段划分，这有助于分析不同场景下执行时间的快慢因素，排除各工具的细节差异。前端项目中依赖包安装的主要执行阶段如下：

• 解析依赖关系阶段：这个阶段的主要功能是分析项目中各依赖包的依赖关系和版本信息。
• 下载阶段：这个阶段的主要功能是下载依赖包。
• 链接阶段：这个阶段的主要功能是处理项目依赖目录和缓存之间的硬链接和符号连接。

优化手段

• 使用 npm 依赖镜像加速下载阶段
• 使用本地依赖缓存（如 pnpm 的软连接）

[ChelesteWang]

微前端

核心思想：先分后合

[spicylemonhaha]

微前端心圆群主能不能多说一些你的理解

[ChelesteWang]

微前端心圆群主能不能多说一些你的理解

微前端其实更多是在特定场景的一个工程化的实现，比如大型项目多人协同开发，各个子系统需要单独部署，或者是渐进式迁移一个复杂的旧系统，需要进行一些新的工程重构与业务开发。或者是在某种跨技术栈上的复用。