1.路由懒加载
SPA项目,一个路由对应一个页面,如果不做处理,项目打包后,会把所有页面打包成一个文件,当用户打开首页时,会一次性加载所有资源,造成首页加载很慢,降低用户体验
路由懒加载的用法
component:home=>import("组件路由地址") 首页资源压缩约52%
原理:ES6的动态地加载模块---Import()
2.组件懒加载
除了路由的懒加载外,组件的懒加载在很多场景下也有重要的
很多页面我们都会写一个弹框的组件,但是一开始所有资源都加载出来,会造成资源浪费,性能下降。这样我们就需要思考让该弹框不是一进入页面就加载,而是需要用户手动触发才会展示出来
组件懒加载的写法:
在需要引入的页面
const dialogInfo=()=>import("组件地址") 首页资源减少11%
组件懒加载要合理使用,使用更多会造成浏览器http请求的增多
使用场景:该页面的js文件体积大,导致页面打开慢,可以通过组件懒加载进行资源拆分,利用浏览器并行下载资源,提升下载速度
2.该组件不是一进入页面就展示,需要一定条件下才触发
3.该组件的复用率高
3.合理使用Tree shaking
tree shaking的作用,消除无用的js代码,减少代码体积,以优化打包结果
现在的webpack5已经自带了这个功能,当打包环境为production时,默认开启tree-shaking这个功能
4.骨架屏优化白屏时长
使用骨架屏,可以缩短白屏时间,提升用户体验,国内大多数的主流网站都是用了骨架屏,特别时手机端的项目
SPA单页应用,无论是vue还是react,最初的HTML都是空白的,需要通过加载js将内容挂载到根节点上,这套机制的副作用,会造成长时间的白屏
常见的骨架屏插件就是基于这种原理,在项目打包时将骨架屏的内容直接放到html文件的根节点中
5.长列表虚拟滚动
首页中不乏有需要渲染长列表的场景,当渲染条数过多时,所需要的渲染时间会很长,滚动时还会造成页面的卡顿,整体体验非常不好
虚拟滚动,指的是只渲染可视区域的列表项,非可见区域的不渲染,在滚动时动态跟新可视区域,该方案在优化大量数据时效果明显
6.加载方式的优化
async,defer是script标签的专属属性,对于网页中的其他资源,可以通过link的preload,prefetch属性来预加载,
preload:可以让关键资源提前加载
7.图片的优化
图片的优化是非常重要的,尤其对于移动端来说,完全没必要去加载原图,浪费带宽
1.图片的动态剪裁功能
2.图片的懒加载