Web加速器：Loderv1.0宣布?

Loder是一个轻量级加载器，经由历程合理地声明资本使命依靠关联，以最高效情势实行Web加载，供应壮大的机能追踪，延续优化机能瓶颈。

现在线性集约式的Web资本加载形式，尤其在前提有限的挪动端，很大水平限定了页面加载体验。费很大劲把剧本体积降下来，却取得极为有限的机能收益。运用微核启动器Loder，疾速启动运用，应用在Bundle加载实行同时，展现Loading交互、提议鉴权、初始数据要求等，最大化应用装备才能进步页面衬着机能。

Loder具有以下特征：

• Dead Simple API
• 声明式依靠，极简的资本使命治理
• 极致加载，统统资本使命都以最适合时候加载
• 轻量体积(1.4kb Gziped), 极速启动运用
• 险些无需修正逻辑，简朴几步即可加快运用至极致！

运用示例

举个栗子，运用会在运转前先把所需剧本预备稳健，之后会递次实行鉴权、受权、猎取数据、衬着。大多数的Web都邑经由历程相似的形式去加载衬着。流程大抵以下：

看似一种很直观的体式格局却很集约，机能优化异常磨练我们对资本使命加载的营业逻辑、依靠、递次的明白，精细化运营这些历程，Web机能能够取得意想不到地提拔。我们能够大抵整顿一下运用的资本使命加载历程：

• 运用启动

  • 依靠[ &＃8220;首屏数据&＃8221;, &＃8220;运用鉴权&＃8221;, &＃8220;运用 Bundle 加载&实行&＃8221;]
  • 启动运用

• 运用鉴权

  • 依靠[ &＃8220;加载鉴权 SDK&＃8221;, &＃8220;取得用户 ID&＃8221; ]
  • 提议鉴权要求

• 首屏数据

  • 依靠[ &＃8220;要求客户端 axios&＃8221; ]
  • 提议多个要求

能够看到，有一部分资本使命是能够正交举行的，这就是我们充分应用浏览器特征进步机能的症结。然则，云云烦琐的加载，保护起来并不轻易。Loder供应极简的API，经由历程声明式注册资本和使命，即能以最优情势举行Web加载，以上述运用启动流程来举例：

启动运用前鉴权

// 资本注册 —— 鉴权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')
})
)

加载首屏数据

// 资本注册 —— 要求客户端
loader.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。

Loder vs SSR

除了高效加载、极简API、无营业入侵性外，Loder作为一个客户端加载器，具有更多自然的上风：

末了

Loder作为一个Web极致机能加载器，驱动Web高效加载衬着，经由历程机能跟踪辅佐发明&优化机能瓶颈，也促使我们去思索怎样构造Web的加载时序。

Links

Landing page: http://loder-docs.scoii.com