注意

前端性能问题，一般都是都是日积月累下来才出现，一旦感觉出性能问题了，再去优化开发成本太高了，所以要养成好的开发习惯，从根上解决

项目架构优化

├── build # 打包脚本相关
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 公共接口文件
│   │   ├── model # 公共接口types文件夹
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── constant # 公共常量静态数据等
│   ├── styles # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量
│   ├── hooks # 对应组件、事件、页面等等相关的hook
│   ├── layouts # 布局文件 -> 简单布局不需要再去拆分
│   │   ├── default # 默认布局
│   │   └── page # 页面布局
│   ├── locales # 多语言
│   ├── main.ts # 主入口
│   ├── router # 路由配置
│   │   └── guard # 针对动态路由、静态路由、路由权限等待相关逻辑
│   │   └── routers # 静态路由配置
│   ├── settings # 项目配置
│   ├── store # 数据仓库
│   ├── utils # 工具类
│   ├── views # 页面
│   │   └── login # 某个页面文件夹
│   │       └── components # 当前页面组件文件夹
│   │       └── api # 当前页面接口
│   │       └── types # 当前页面类型
│   │       └── data # 当前页面常量静态数据等
└── vite.config.ts # vite配置文件

这是我主导项目的划分，小项目不需要划分这么细致，但是项目体积一旦堆积起来后，合理的结构划分能避免不必要的性能和开发问题

• 剩下的就是老生常谈的了：组件、utils、store、eslit、prettier等封装或者集成，webpack、vite代码分割、动态导入等，就懒得再写了
• 自动化部署：各个公司有各个公司的部署流程，一版都是gitlab+jks，我们是coding(其实本质也是gitlab和jks)

堆其实就是把地基打牢，省的最后变💩山

项目开发过程

其实还是老生常谈😂

• 合理使用v-if和v-show，减少dom渲染
• 合理使用key值，减少dom渲染
• 组件懒加载
• 合理使用computed、避免重复计算
• 状态下沉：将数据管理从父组件转移到子组件中，减少props(好处：数据流动明确、复用性高、简化状态管理、好维护、避免父组件不必要的状态更新减少父组件dom渲染)
• 状态提升：多子组件共同状态提升到父组件维护
• keep-alive：减少组件/页面创建和销毁(静态组件/页面无脑梭哈keep-alive)
• 避免内存泄露：比如定时器、事件监听等要清除
• 图片压缩(webp/avif)
• 图片懒加载
• 避免重流和重绘：最好别接操作dom、少些内联样式
• webpack、vite对代码进行分割，尽可能减少主包代码体积
• 按需引入第三方库
• 长列表时可以使用虚拟列表和虚拟滚动

项目部署

• 配置cdn缓存(需要花💰)
• 关键css可以写html，减少空白阻塞时间
• 使用async和defer异步加载js文件，避免阻塞渲染
• 上面说的拆分主包代码