1.项目性能优化
-
优化打包速度和体积
① webpack 插件打包体积分析工具
② webpack 配置插件,JS 和图片压缩
③ 去除多余的依赖，以及去除一些依赖中不需要的部分。比如 moment 中国际时间的部分，或者使用 dayjs、element、echarts都可以按需引入
④ 尽量少使用图标，以icon代替
⑤ webpack Tree Shaking去除无用代码
⑥ 设置 babel 的作用范围，让插件不进行转译。因为插件其实都是做了es5的转义的
-
优化页面加载时间：
① webpack 配置大文件 js 拆分
② 路由及组件的懒加载
③ 开启 http2（尤其是有 gis 地图的情况下，http2 没有请求个数的限制）
④ gzip 压缩
⑤ ssr 服务端渲染
-
感知优化
① 骨架屏
② keep-alive 缓存
③ 节流和防抖
④ loading 效果
-
查看指标： LightHouse
2.项目开发优化
- 配置本地代理
- alias 别名，可以配置常用的路径别名
- 环境变量，区分开发、测试、线上
- 打包去掉 console 和 debug
- vscode统一配置eslint和代码格式化
- 一些vscode插件
