前端性能优化解决方法:借鉴来源
前端性能优化主要有七种方法,包括减少请求数量、减少资源大小、优化网络连接、优化资源加载、减少重绘回流、使
用性能更好的API和webpack优化
1.减少请求数量:
(1)图片处理:雪碧图
(2)减少重定向:
(3)使用缓存:
(4)避免使用空的src和href
2.减少资源大小:html、css、js、图片资源压缩(可以通过插件生成体积小的图片)
3.优化网络连接:
(1)使用CDN解决网络拥挤,提高网站响应速度;
(2)DNS预解析
(3)持久连接:keep-alive
4.优化资源加载:
(1)减少入口文件体积:路由懒加载,把不同的路由对应的组件分割成不同的代码块,待路由被请求的时候单独打包,使入口文件变小
(2)使用ssr(服务端渲染)组件或页面通过服务器生成html字符串,再发送到浏览器
5.webpack性能优化:
(1)打包公共代码,避免组件重复打包:
(1)ui框架以及库按需加载:按需加载,不要全局引入
(2)删除无用代码:tree-shaking