前段时间在掘金上看到一位小伙伴写的模块化解决方案,今天心血来潮也弄了一个

第一次发帖,文笔有限,技术有限,请各位多多包涵!

demo

源码地址

解决问题

  • 首屏内容过多导致的FPS降低卡顿
  • 加快首屏加载速度
  • 动态控制首屏加载内容

实现思路

使用window.requestAnimationFrame和document.readyState实现组件加载

window.requestAnimationFrame保证加载时的FPS不会太低

document.readyState获取当前dom节点加载状态,保证在之前的节点渲染完之后再去渲染新的节点

支持的功能

  • 动态组件props传递
  • 动态组件事件监听
  • 动态组价实例对象获取
  • 动态组件销毁
  • 动态组件异步加载

效果

这里是普通加载模式

这里是模块化顺序加载模式

GankRobot转载声明

原文出处:掘金前端

原文作者:Error1494467901739

原文地址:https://juejin.im/post/5d5a5c33518825371070eb7d