项目性能优化(vue项目优化)

178 阅读1分钟

代码层面

  • 路由懒加载
  • 图片懒加载
  • 虚拟列表
  • 第三方UI库按需引入
  • 防抖 节流
  • 封装组件 因为组件就可以被复用
  • 想办法减少减少重绘和回流
    • documentFragment文档碎片 比如我们要页面加100个DOM节点,不要一个一直接加在DOM树上,因为这样会导致100次回流和重绘,而是先把这100个加到碎片上,直接一次性加到DOM上,只会有一次回流和重绘
    • 用类名操作 不要用一堆的行内样式
    • 开启css3的gpu硬件加速 transform

打包层面

  • 用插件移除console.log (因为代码变少了,肯定性能好)
  • 关闭sourcemap (因为打包的文件就变少,打包速度肯定变快)
  • tree shaking 摇树 webpack只会保留模块中按需引入,没有引的直接打包的结果把它删除掉
  • 模块懒加载 主包变小了
  • happypack 可以实现多线程打包
  • dllPlugin 它是把模块分为二种 业务包 第三方插件包(基本代码不可能改变) 用这个可以实现把第三方包打包一次以后再也不用动,以后只需要打包业务包
  • cdn

http优化

  • 尽量用http2.0 因为可以做到多路复用
  • 开启缓存机制

图片

  • 精灵图 sprite 一堆小图片合并成一张图
  • 用字体图标
  • 压缩图片 tinypng.com/