vue项目做过哪些优化?有没有对首屏做过优化*
1)代码层面的优化
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key,且避免同时使用 v-if
长列表性能优化
事件的销毁 addEventlisenter 事件监听
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染
(2)Webpack 层面的优化
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
(3)基础的 Web 技术的优化
开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈
为什么做首屏优化:
首屏时间的快与慢,直接影响到了用户对网站的认知度。 所以首屏时间的长短对于用户的滞留时间的长短、用户转化率都尤为重要。
如何做首屏优化?
1.css模块化加载,对应模块下的css交给js或jsonp请求返回 js懒执行,有交互才执行
2.图片在其他屏(非首屏)都采用懒加载的模式,这样既能节省流量,也能减少请求数或延迟请求数。
3.服务器方面:
- 少量静态文件的域名,图片与iconfont均是放在同一个域下,减少DNS的解析事件,最好做到域名收敛。
- 模块化接口的支持。
- 首屏内容最好做到静态缓存
- 对于vue和react做ssr
原文地址:https://blog.csdn.net/m0_48919773/article/details/112392302
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。