项目优化思路

仅属于个人在日常工作中的总结，欢迎补充交流哈~

优化参考

请求优化、代码优化、打包优化

Lighthouse 是生成性能分析报告。可以看到每一项的数据和评分和建议优化的点，比如哪里图片过大
Performance 是运行时数据，可以看到更多细节数据。比如阻塞啊，重排重绘啊，都会体现出来，够不够细节

webpack

1. 1不要让 loader 做太多事情——以 babel-loader 为例 最常见的优化方式是，用 include 或 exclude 来帮我们避免不必要的转译
   –合理使用使用 cache-loader（开销较大的loader，存在磁盘里，显著提升第二次构建的速度）
2. DllPlugin–防止第三方的插件重复进行打包
3. Happypack——将 loader 由单进程转为多进程
4. 文件结构可视化，找出导致体积过大的原因–webpack-bundle-analyzer
5. 删除冗余代码—一个比较典型的应用，就是 Tree-Shaking
6. Gzip 压缩原理
7. TerserPlugin去压缩js代码
8. css-minimizer-webpack-plugin CSS代码压缩
9. HtmlWebpackPlugin插件配置属性minify进行html优化

vite

• 预加载

页面请求过多时，该怎么优化？

• 懒加载
• 虚拟列表
• 合并请求
• 缓存-把一些不经常改变的数据放在缓存里

能说说首屏加载优化有哪些方案么（参考）

• Vue-Router路由懒加载（利用Webpack的代码切割）
• Nginx的gzip压缩
• Vue异步组件
• 如果使用了一些UI库，采用按需加载
• Webpack开启gzip压缩
• 如果首屏为登录页，可以做成多入口

日常代码的优化：

• 借助可视化打包工具进行具体部分的占比分析
• 图片的优化
• 浏览器缓存机制的优化–强缓存还是协商缓存
• 本地储存–cookie，localstage
• 回流和重绘
  –对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流
• 首屏优化
• 性能监测：performance，LightHouse

其他

• 把代码分成小块–更利于后期的维护
• 对于变量的提出，有利于松耦合（改变想法的同时不会改变太多的代码）
• 使用状态机的模式—判断于事件分离
• 依赖注入–把经常需要改变的值作为变量传参