Web轻量级加载器Loder v1.0 发布 vs ssr

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

Loder是一个轻量级加载器，通过合理地声明资源任务依赖关系，以最高效形式执行Web加载，提供强大的性能追踪，持续优化性能瓶颈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

目前线性粗放式的Web资源加载模式，尤其在条件有限的移动端，很大程度限制了页面加载体验。费很大劲把脚本体积降下来，却得到极其有限的性能收益。使用微核启动器Loder，快速启动应用，利用在Bundle加载执行同时，展示Loading交互、发起鉴权、初始数据请求等，最大化利用设备能力提高页面渲染性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

Loder具备以下特性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

• Dead Simple API
• 声明式依赖，极简的资源任务管理
• 极致加载，所有资源任务都以最适合时刻加载
• 轻量体积(1.4kb Gziped), 极速启动应用
• 几乎无需修改逻辑，简单几步即可加速应用至极致！

应用示例

举个栗子，应用会在运行前先把所需脚本准备妥当，之后会顺序执行鉴权、授权、获取数据、渲染。大多数的Web都会通过类似的模式去加载渲染。流程大致如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

看似一种很直观的方式却很粗放，性能优化非常考验我们对资源任务加载的业务逻辑、依赖、顺序的理解，精细化运营这些过程，Web性能可以得到意想不到地提升。我们可以大致整理一下应用的资源任务加载过程：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

• 应用启动
  • 依赖[ "首屏数据", "应用鉴权", "应用 Bundle 加载&执行"]
  • 启动应用
• 应用鉴权
  • 依赖[ "加载鉴权 SDK", "获得用户 ID" ]
  • 发起鉴权请求
• 首屏数据
  • 依赖[ "请求客户端 axios" ]
  • 发起多个请求

可以看到，有一部分资源任务是可以正交进行的，这就是我们充分利用浏览器特性提高性能的关键。但是，如此繁琐的加载，维护起来并不容易。Loder提供极简的API，通过声明式注册资源和任务，即能以最优形式进行Web加载，以上述应用启动流程来举例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

启动应用前鉴权

// 资源注册 —— 鉴权SDK
loder.add('authSDK', loder.loadScript('//sample.com/sdk.js'))

// 任务注册 —— 获取用户id
loder.add(
  'userId',
  () =>
    new Promise(resolve => {
      resolve('id')
    })
)

// 任务注册 —— 鉴权
loder.task(
  'auth', ['authSDK', 'userId'],
  () => new Promise(resolve => {
    // do auth
    resolve('success')
  })
)

加载首屏数据

// 资源注册 —— 请求客户端
loder.add('axios', () => import('axios'))

// 资源注册 —— 首屏数据
loder.task(
  'fpData', ['axios'],
  () => new Promise(resolve => {
    const axios = loder.get('axios')
    return axios('//sample.com/userData.json')
  })
)

启动应用

// 资源注册 —— JS Bundle
loder.add('createAppFn', () => import('./createAppFn'))

// 任务声明 —— 应用启动
loder.task('bootstrap', ['auth', 'fpData'])

// 一切就绪，执行加载
loder.run('bootstrap', async () => {
  const create = await loder.echo('createAppFn')
  create("Awesome Time")
})

通过非常的简单声明，Loder不仅仅将PageLoaded性能提升至极致，甚至可以利用首屏数据请求期间，去加载应用所需的资源脚本，以及花费大量时间执行的Bundle。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

Loder vs SSR

除了高效加载、极简API、无业务入侵性外，Loder作为一个客户端加载器，具备更多天然的优势：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

最后

Loder作为一个Web极致性能加载器，驱动Web高效加载渲染，通过性能跟踪辅助发现&优化性能瓶颈，也促使我们去思考如何组织Web的加载时序。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

Links

Github: github.com/yesvods/lod…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html

Landing page: loder-docs.scoii.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/388.html