回顾一些项目要点
1.vite为什么比webpack快
webpack的devserve启动时把所有文件build一遍，它从入口文件索引整个项目，编译成一个或多个js文件；不管模块是否被执行，都要编译打包到bundler里面，项目越来越大模块越来越多，所以打包速度越来越慢
vite启动时不需打包，不需要编译，不拆分模块依赖，浏览器请求某个模块时，根据需要对模块进行编译，是动态按需编译方式；热更新时仅需让浏览器重新请求该模块
底层原理：vite基于es build预构建，使用go语言编写，比js编写打包器快10-100倍，js操作毫秒级，go语言操作纳秒级
2.微前端低成本接入方案
MicroApp，借鉴webComponent思想，通过CustomElement结合自定义shadowDom，将微前端封装乘一个类WebComponent组件，
之前项目用qiankun 监听url change事件，子应用需要改入口文件
3.滑块验证实现
获取容器宽度和滑块宽度，随机生成图片缺口
var left = ~~(Math.random() * (boxWidth -2) * imgWidth)) + imgWidth
监听滑块，设置距离容器值
img.style.left = (e.target.value / 100) * (boxWidth - imgWidth) + "px"
4.开发类似vue-cli 脚手架流程
安装commander.js、dowload-git-repo、Inquirer.js、ora
package.json 设置"bin"对象命令，本地npm link，执行使用命令
program设置option命令，通过inquirer.prompt设置初始化数据
5.一次性处理后端返回的10万条数据
虚拟列表，对可见区域渲染 非不可见区域不渲染
监听容器的scroll事件，获取滚动位置scrollTop，推算列表总高、列表项数、动态起始索引和结束索引、slice截取列表显示数据
滚动时获取偏移量startOffset = scrollTop - ( scrollTop % itemSize ),然后通过translate3d(0,${this.startOffset}px,0)设置偏移style
白屏情况加数据预渲染处理
new:css处理 content-visibility-auto;contain-intrinsi-size:200px
6.一次性导出大量数据方案
借助xlsx sheetjs FileSave库，分片后台返回数据，防止一次处理过多数据卡死，然后遍历分片，转换成excel片段，然后创建blob对象，通过FileSave转成excel文件
7.导出pdf文档
借助html2canvas jsPDF库
传递需要截取dom元素给html2canvas，返回promise对象，toDataURL转成图片，新建jsPDF对象，传图片宽高 类型等参数，最后保存成pdf文件
8.轮播图切换时背景色处理
Ps或者在线高斯模糊背景图片，轮播时切换背景图片
提取图片主色调，一种通过canvas的getImageData 平均值算法获取主色调，再用linear-gradient设置渐变
第二种借助color-thief开源库，返回rgba数据，再设置渐变
9.microApp 微前端方案
注册 子应用通过window.microApp.addDataListenner监听数据变化，通过window.microApp.dispatch发送数据
主应用对象通过dataChange监听子应用发送的数据
注意主应用保持一个子应用dom元素
10.webpack优化
speed-measure-webpack-plugin，计算每个插件构建时间
webpack-bundle-analyzed，分析包体积 占比，查看是否重复引用，vue.config.js 引用 配置 判断是否生产环境
webpack --config config/webpack.prod.js --profile --json > stats.json 生成stats.json 借助官方Webpack Analyse在线分析工具分析 每个模块构建时长
depcheck分析没有引用到的包
11.登录实现
流程：请求登录接口，后端校验参数 生成token唯一字符串，拦截每次请求 判断是否带token，前端拿token存储localstorage，路由守卫处理需要登录状态的跳转
jwt鉴权，前端在每次请求时将JWT Token放入HTTP请求头中的Authorization属性中(解决XSS和XSRF问题)，不用在服务端存储认证信息（token），完全由客户端提供，服务端只要根据 JWT 自身提供的解密算法就可以验证用户合法性
12.权限实现
分接口、按钮、菜单、路由四种权限
router定义基础、异步路由，需要动态加载的地方设置role唯一id
路由守卫里通过store拿登录进来的角色数据，拿到当前用户roleIds 菜单权限
案例部署http://vue2.dongjunhao.cn
13.vue里使用echarts
封装echarts基本配置，用lodash的merge 将配置数据、业务数据merge
mounted组件初始化时更新视图、监听缩放，引用element-resize-detector监听页面尺寸，图表调用resize
14.useEffect和useLayoutEffect
渲染时机不同，前者异步 不阻塞渲染；后者同步 执行完后渲染 避免数据变化闪烁问题
15.锚点定位
给跳转的地方id，点击的地方调用公共方法传id，然后用this.$el.querySelector(selector).scrollIntoView({
behavior:'smooth',//动画过度效果
block:'start',//垂直方向对齐
inline:'水平方向对齐'
})
16.优化加载字体库
动态提取项目需要的字符，https://github.com/allanguys/font-spider-plus 动态分析构建包，https://github.com/ecomfe/fontmin 提取字体包，替代全量字体包
空闲时加载全量
17.移动端调试
全局引用vconsole，script里 new Vconsole()
请求安装Charles 抓取http https
线上抓包调试whistle
18.视频播放
引video.js，挂prototype全局，this.$refs.video,options,function(){}
19.组织架构图组件
antV x6，日历图表fullcalendar
20.人机交互
Web Speech Api
人脸识别 face-api.js
视频流用到 MediaDevices.getUserMedia(),提示媒体许可生成MediaStream，返回promise对象
备：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
评论区