聊聊前端工程化1.1 什么是前端工程化？（通俗解释） 前端工程化可以理解为用"工程化思维"来系统化管理前端项目的构建、开 - 掘金 (juejin.cn)
针对开发效率
- HMR（热更新） ：修改代码后无需刷新整个页面，大幅提升开发体验
- 自动构建和刷新：文件保存后自动编译和刷新浏览器
热更新webpack5需要配置hot:true，vite自带热更新，无需额外配置
- 自动依赖管理：工具自动处理模块间的引入关系
插件autoImport和Components可以实现，然后在vite和webpack里面配置就行，我对于项目是配了三通用组件库的自动引入
- 自动化预处理：如PostCSS自动添加浏览器前缀
postcss实现css的自动预处理，主要是依赖于autoprefixer插件
vite和vuecli自带postcss所以不需要安装postcssloader（虽然我装了），webpack5需要额外安装对应loader
# .browserslistrc文件里面添加
> 1%
last 2 versions
not dead
not ie <= 11
针对代码质量
- ESLint：保证语法与代码风格统一
- Prettier：自动格式化代码，保证格式一致
直接装了prettier的vscode插件
- TypeScript：提供静态类型检查，保证类型安全
单元测试：保证业务逻辑的正确性
针对性能提升
- 代码压缩：减少文件体积
- Tree Shaking：消除无用代码
- 代码分割：按需加载资源
- 资源优化：图片压缩、资源Hash化等
针对团队协作
- 统一脚手架：确保项目结构一致性
不统一也行，一般网页端是微前端实现项目隔离，跨端
- 规范工具：统一的代码规范和提交规范
- Git Hooks：保证代码提交前的质量检查
git仓库远程协作，流水线规则检查，以及代码review（我们组内一般用ai工具辅助review）
- Monorepo：管理多个项目间的共享逻辑
- CI/CD：自动化测试与部署流程
jenkins部署，前后端分离
优化发布与维护
- CI/CD流水线：自动构建、测试和部署
- Docker容器化：实现"一次构建，到处运行"
- 回滚机制：一键回滚到历史稳定版本
- 监控系统：自动预警生产环境问题
