谈谈前端工程化

前端工程化的主要目标就是提高生产效率。通过制定一系列的规范，借助工具和框架解决前端开发以及前后端协作过程中的痛点和难度问题

• 包括技术选型、项目脚手架、代码组织结构、UI规范、代码规范、组件规范、提交规范、单元测试、CICD规范
• webpack/vite搭建以及配置优化
• 组件库搭建选型，业务组件开发
• 静态资源处理
• 组件模块化，把一个大的文件，拆分多个小文件模块，按照业务来拆分，提高模块的维护性和可读性
• 私有组件库搭建
  • 每个项目中，其实很多组件都是一样，没必要每个项目都写一遍，搭建组件库可以更好的提高效率

​

你是如何搭建私有组件库？

随着公司前端项目越来越多，每个项目出现了很多可复用的业务组件，为了提升开发效率和方便维护，避免每次都要在项目之间复制粘贴相同的组件，我们可以把可复用的组件和逻辑封装成npm包，通过npm包的形式来引入

• 使用verdaccio搭建私有组件库

搭建步骤：

• 在服务器上安装verdaccio
• 安装好之后，就配置verdaccio
  • ~/.config/verdaccio/config.yaml
  • 如storage配置包的存储路径、auth用户相关配置，packages包权限控制配置
    • 需要指定哪些用户可以删除包和上传包，来更好的管理npm包
• 配置npm源，可以通过工具来切换npm源，一般使用nrm来灵活切换npm源，比如淘宝源、公司私有源

更好的使用verdaccio私有库

• 发布包之后推送钉钉通知
  • 设置钉钉机器人
• 包权限控制配置

谈谈你在项目里是如何做前端工程化？

• 前端工程化的主要目标就是提高生产效率
• 搭建整个项目架构的基础基建，比如集成相关规范（如git提交规范、eslint规范）、构建的配置优化、组件库选型、包管理统一使用pnpm，可以更好的去管理项目之间的依赖
• 对于多个新的项目来说，这些基础架构框架其实都一样，可以设计成通用的脚手架，对于脚手架的开发也是有经验的，自己也写过脚手架并且开源，通过脚手架集成了常用的配置，提高了项目搭建的效率。是有意义的
• 针对项目的静态资源的处理，通过cdn+oss的配合

静态资源如何处理？

1、上传到oss的好处 【阿里云oss对象存储】

• OSS会自动帮你压缩 【使得你的页面加载速度极快】
• 成本低廉
• 减少带宽问题，提高用户体验

2、上传到CDN【内容分发网络】

• CDN主要是用于站点的加速，提高网站中的静态资源的访问性能，比如图片、视频、音频等
• 使用cdn加速oss

OSS和CDN有什么区别呢？使用场景是什么？

• OSS 是做存储的，CDN 是做内容加速的
  • 打比方：OSS 是硬盘，用来存数据，那么 CDN 就是宽带，用来传输数据
• 一般二者是配合使用的，对象存储oss里面存的就是一些图片、视频、文件等等，都是静态数据，可以给用CDN做加速

OSS 和 CDN 能否相互替代？

• 不能

OSS和CDN如何配合使用？

• OSS可作为CDN的源站,通过CDN加速内容分发，用户通过CDN节点就近获得文件资源
• 可降低服务器负载

1、在CDN的控制台上，添加OSS的域名

2、获取CDNME, 配置CDNME

• CDNME：域名的别名，用于将域名解析到另一个域名

2、在OSS控制台上，打开加速域名的CDN缓存自动刷新开关

移除未使用的代码

• 项目中，会使用大量的就js、ts、css代码，有一些是未使用的代码，如果全部都打包，那么造成的体积过大，提高页面加载资源的速度

移除js/ts未使用代码

• tree-shaking

  • 利用 ES6 模块的静态分析特性，分析哪些导出模块被实际使用，没有被使用的模块，会被移除

  • TypeScript 在编译后变为 JavaScript，因此 Tree-Shaking 对它也有效

    • 注意TypeScript 编译配置要设置为ES6 模块，即module为 esnext或es2020

移除css未使用代码

• PurgeCSS
  • 通过PurgeCSS会分析内容和CSS文件，来确定哪些样式未使用的，并将它删除