前端性能优化

75 阅读1分钟

资源类优化

  1. 图片在保证画质的前提下选择体积更小的图片,png>jpg|jpeg>gif>webp>base64。
  2. 图标类图片采用svg或者iconfont保存
  3. 图片较大采用懒加载方式
  4. 列表数据过多采用虚拟列表
  5. 有些频次较高的请求适当加防抖和节流
  6. network中检查是否出现重复请求或者无用请求,多余请求删除。
  7. loadsh或其他插件库按需引入,减小打包体积
  8. 某些库可以采用体积更小的库进行替换,比如monent.js改为day.js
  9. Antd组件按需引入
  10. ivew组件按需引入(现在iview全量入,其实部分组件从来没用过,可考虑去除)
  11. 采用骨架屏优化体验

代码优化

  1. 两个及以上重复模块抽取通用方法
  2. v-if和v-show视情况使用,当需要频繁切换时采用v-show处理
  3. 注册的全局事件或者定时器及时注销
  4. 条件判断语句过多时改用switch或者查找表
  5. 能抽取成配置的代码尽量配置化开发
  6. 页面加载或者请求时加loading

打包及配置

  1. gzip压缩
  2. 前端预渲染
  3. image-webpack-loader,构建时压缩图片
  4. core-js体积优化
  5. DLLplugin构建优化
  6. 开启http2
  7. uselessFile插件去除无用文件
  8. 采用lodash-es代替loadsh,达到按需引入效果