项目性能优化(vue项目优化)
代码层面
- 路由懒加载
- 图片懒加载
- 虚拟列表
- 第三方UI库按需引入
- 防抖 节流
- 封装组件 因为组件就可以被复用
- 想办法减少减少重绘和回流
- documentFragment文档碎片 比如我们要页面加100个DOM节点,不要一个一直接加在DOM树上,因为这样会导致100次回流和重绘,而是先把这100个加到碎片上,直接一次性加到DOM上,只会有一次回流和重绘
- 用类名操作 不要用一堆的行内样式
- 开启css3的gpu硬件加速 transform
打包层面
- 用插件移除console.log (因为代码变少了,肯定性能好)
- 关闭sourcemap (因为打包的文件就变少,打包速度肯定变快)
- tree shaking 摇树 webpack只会保留模块中按需引入,没有引的直接打包的结果把它删除掉
- 模块懒加载 主包变小了
- happypack 可以实现多线程打包
- dllPlugin 它是把模块分为二种 业务包 第三方插件包(基本代码不可能改变) 用这个可以实现把第三方包打包一次以后再也不用动,以后只需要打包业务包
- cdn
http优化
- 尽量用http2.0 因为可以做到多路复用
- 开启缓存机制
图片