前端工程化

什么是工程化

工程化， 就是一切能提高开发效率，提升代码质量，使工作流清晰，使开发人员体验更好的工具和手段。 前端项目工程化后，有下面几个特点：

• 开发流程清晰，易操作，自动化构建部署
• 开发效率快，代码质量高
• 模块化、组件化、规范化

初始搭建-脚手架

• 多子项目（monorepo + larn + pnpm）
• 确定主体框架（vue、react、angular...）
• 打包工具（vite、webpack、rollup...）
• css 管理（windicss、less、scss...）
• husky + commitlint + lint-staged git 提交规则校验
• eslint 代码质量检测 （定制适合项目团队的编码规则）
• 搭建 mock 服务
• 配置环境变量，实现一套代码多环境运行
• 引入单元测试
• 错误边界处理
• 错误路由页面引导
• 懒加载配置
• 移动端：弱网环境的骨架屏

构建打包

• 代码分割(tree-shaking)
• 资源文件 hash 策略
• 兼容性 Babel
• 代码压缩
• 无障碍访问

自动化部署流水线

• 考虑不同环境的处理
• 安装依赖一致性，添加缓存提高安装速率
• 生产监测，对性能差、访问频率高的页面进行优化提速

pnpm

pnpm 比 npm、yarn 更好 pnpm

• 通过软连接，解决了依赖重复占用磁盘空间的问题
• 更干净的 node_modules，避免了“幽灵依赖”的风险（同级的 node_modules 中只会有同级的 package.json 中声明了的依赖）

webpack 常用配置

• 更精确的范围 loader rules
• resolve.modules
• 导入语句尽量带上后缀
• 较大的三方库配置 CDN
• 压缩 css\js
• html-weboack-plugin 生成 html 文件，并配置压缩
• tree