前端性能优化
资源类优化
- 图片在保证画质的前提下选择体积更小的图片,png>jpg|jpeg>gif>webp>base64。
- 图标类图片采用svg或者iconfont保存
- 图片较大采用懒加载方式
- 列表数据过多采用虚拟列表
- 有些频次较高的请求适当加防抖和节流
- network中检查是否出现重复请求或者无用请求,多余请求删除。
- loadsh或其他插件库按需引入,减小打包体积
- 某些库可以采用体积更小的库进行替换,比如monent.js改为day.js
- Antd组件按需引入
- ivew组件按需引入(现在iview全量入,其实部分组件从来没用过,可考虑去除)
- 采用骨架屏优化体验
代码优化
- 两个及以上重复模块抽取通用方法
- v-if和v-show视情况使用,当需要频繁切换时采用v-show处理
- 注册的全局事件或者定时器及时注销
- 条件判断语句过多时改用switch或者查找表
- 能抽取成配置的代码尽量配置化开发
- 页面加载或者请求时加loading
打包及配置
- gzip压缩
- 前端预渲染
- image-webpack-loader,构建时压缩图片
- core-js体积优化
- DLLplugin构建优化
- 开启http2
- uselessFile插件去除无用文件
- 采用lodash-es代替loadsh,达到按需引入效果