前端工程化相关问题

前端工程化的核心基石有哪些？各自的作用是什么？

核心基石包括三大支柱 + 五大支撑体系，核心作用如下：

1. 模块化（ES Module）：拆分代码，解决全局污染和复用问题；
2. 组件化（React/Vue：拆分 UI，解决 UI 冗余和跨页面复用问题；
3. 自动化构建（Vite/Webpack）：自动化编译、打包、优化，提升开发效率；
4. 包管理（pnpm/npm）：管理第三方依赖，保证依赖一致性；
5. 规范化（ESLint/Prettier）：统一代码、提交、分支标准，减少协作冲突；
6. 性能优化（Tree Shaking / 懒加载，SSR/SSG）：提升页面加载和运行性能；
7. 测试体系（Jest / 组件测试）：保证代码质量，减少线上 Bug；
8. CI/CD（GitHub Actions）：自动化部署，提升迭代效率。

模块化和组件化的区别与联系？

• 区别：

  • 关注维度：模块化关注 “代码逻辑” 的拆分（如工具函数、接口请求），组件化关注 “UI 结构” 的拆分（如按钮、表单）；
  • 核心目标：模块化侧重 “逻辑复用和隔离”，组件化侧重 “UI 复用和组合”；
  • 粒度：模块化粒度可大可小（一个函数、一个文件），组件化粒度通常是独立的 UI 单元（含结构、样式、逻辑）。

• 联系：

  • 组件化依赖模块化：组件内部的逻辑（如事件处理、接口请求）通常拆分为模块；
  • 模块化支撑组件化：模块化的复用能力让组件逻辑更简洁；
  • 两者都是工程化 “拆分思想” 的体现，共同降低项目复杂度。

为什么自动化构建是前端工程化的核心？常用的构建工具对比？

1. 自动化构建的核心地位：

   • 是模块化 / 组件化的落地载体：将拆分的模块 / 组件打包为浏览器可识别的代码；
   • 集成编译、优化、部署等流程：减少人工操作，避免出错；
   • 适配不同环境：通过配置区分开发 / 生产环境，满足不同需求。

2. 常用构建工具对比：

   工具	核心优势	适用场景
   Webpack	生态完善、功能全面	中大型项目、复杂配置需求
   Vite	开发环境启动快、原生 ESM	现代前端项目（React/Vue）
   Rollup	打包体积小、支持 Tree Shaking	库打包、轻量项目
   Parcel	零配置、上手简单	小型项目、快速原型开发