一口三个馍

Appearance

前端工程化 ​

前端工程化是指将前端开发过程标准化、规范化、自动化的一系列技术和实践。通过工程化手段提高代码质量、开发效率和可维护性。

模块打包 ​

Webpack ​

  • 核心概念: Entry、Output、Loaders、Plugins
  • 资源管理: 引入库、处理样式、处理资源
  • 模块代码分割: Dynamic Imports、Route Splitting、Vendor Separation
  • 性能优化: Tree Shaking、Minification、Lazy Loading
  • 开发体验: Hot Module Replacement、DevServer、Source Maps

Vite ​

  • Next Generation: ES Module、快速开发、极速冷启动
  • 特点: 按需编译、原生 ESM、开发体验优秀
  • 插件系统: 框架集成、NPM 依赖预捆绑
  • 构建优化: Rollup 打包、动态导入、CSS 分割

其他工具 ​

  • Parcel: 零配置打包、快速开发、自动优化
  • Rollup: 库打包、三方依赖打包、虚拟插件
  • esbuild: 极速编译器、Go 实现、构建加速

转译编译 ​

TypeScript ​

  • 类型系统: 基础类型、泛型、类型推断
  • 高级特性: 装饰器、元数据、Enum
  • 编译配置: tsconfig.json、编译选项、输出配置
  • 类型定义: .d.ts、类型声明、DefinitelyTyped

Babel ​

  • 转译: ECMAScript 最新语法转换、兼容旧浏览器
  • 插件系统: 功能扩展、自定义转译、AST 操作
  • 预设: env、react、flow、集合方案
  • 性能: 编译缓存、构建加速

预处理器 ​

  • SCSS/SASS: 变量、Mixin、Nesting、导入
  • Less: 动态样式、函数、作用域
  • Stylus: 简洁语法、元编程

代码质量 ​

Linting ​

  • ESLint: 代码规范、错误检测、自动修复
  • Stylelint: 样式规范、CSS 检测
  • 规则配置: 共享配置、插件、自定义规则

格式化 ​

  • Prettier: 代码格式化、一致性风格、强制统一
  • EditorConfig: 跨编辑器配置、缩进规范
  • 集成工具: Pre-commit hooks、IDE 集成

测试框架 ​

  • 单元测试: Jest、Vitest、Mocha
  • 端到端测试: Cypress、Playwright、WebDriver
  • 集成测试: Testing Library、Enzyme、Astro
  • 覆盖率: Coverage 统计、阈值控制

包管理 ​

npm/yarn/pnpm ​

  • 依赖管理: 版本控制、锁定文件、依赖解析
  • 性能: 并行下载、缓存、硬链接
  • 工作空间: Monorepo management、包管理
  • 脚本运行: npm scripts、生命周期、自定义命令

版本管理 ​

  • 语义化版本: MAJOR、MINOR、PATCH
  • 版本范围: ^、~、*、精确版本
  • 发布流程: Changelog、Tag、NPM 发布

构建流程 ​

CI/CD 集成 ​

  • GitHub Actions: 工作流、自动化测试、部署
  • GitLab CI: Pipeline、Job、Stage
  • Jenkins: 构建、测试、部署
  • 自动化: 代码检查、单元测试、集成部署

构建优化 ​

  • 缓存: 构建缓存、依赖缓存、构建加速
  • 并行构建: 多进程、分布式构建
  • 增量构建: 增量编译、Diff 检测

开发工具 ​

IDE/编辑器 ​

  • VS Code: 插件生态、扩展能力、集成开发
  • WebStorm: 智能提示、集成工具、专业工具
  • Vim/Neovim: 轻量级、高效编辑、可配置

调试工具 ​

  • DevTools: Chrome DevTools、性能分析、调试技巧
  • Source Maps: 源代码映射、调试原始代码
  • Debug 协议: CDP、远程调试、自定义工具

性能优化 ​

代码分割 ​

  • 路由分割: 按路由加载、减少初始包体积
  • 动态导入: import() 语法、条件加载
  • vendor 分割: 第三方库隔离、缓存优化

代码压缩 ​

  • Minification: 变量重命名、空白删除、死代码消除
  • Tree Shaking: 无用代码删除、ES Module 前提
  • CSS 优化: PurgeCSS、未使用样式删除

资源优化 ​

  • 图片优化: 压缩、格式转换、响应式图片
  • 字体优化: Web Font、加载优化、 回退方案
  • CDN: 内容分发、缓存策略

文档与认知 ​

代码文档 ​

  • 注释规范: JSDoc、类型提示、参数说明
  • README: 项目说明、安装步骤、使用示例
  • API 文档: OpenAPI、Swagger、自动生成

知识共享 ​

  • 最佳实践: 代码示例、问题记录、解决方案
  • 团队规范: 编码规范、架构规范、提交规范
  • 学习资源: 文档链接、视频教程、参考资料

工程化实践 ​

脚手架工具 ​

  • Create React App: 零配置、官方方案
  • Vue CLI: 项目创建、配置管理
  • Vite + 模板: 快速启动、现代工具链
  • 定制脚手架: 团队标准化、自动化工程

组件库 ​

  • 组件开发: 独立开发、文档生成、版本管理
  • 设计系统: 设计规范、组件标准、品牌一致
  • 打包发布: 多格式输出、TypeScript 支持、文档部署

监控与分析 ​

  • 性能监控: 首屏加载、FCP、LCP、性能指标
  • 错误追踪: 错误捕获、堆栈追踪、用户反馈
  • 用户分析: PV、UV、用户行为、转化漏斗