Web加速器：Loder v1.0 發佈 ?

Loder是一個輕量級加載器，經過合理地聲明資源任務依賴關係，以最高效形式執行Web加載，提供強大的性能追蹤，持續優化性能瓶頸。

目前線性粗放式的Web資源加載模式，尤爲在條件有限的移動端，很大程度限制了頁面加載體驗。費很大勁把腳本體積降下來，卻獲得極其有限的性能收益。使用微核啓動器Loder，快速啓動應用，利用在Bundle加載執行同時，展現Loading交互、發起鑑權、初始數據請求等，最大化利用設備能力提升頁面渲染性能。

Loder具有如下特性：

• Dead Simple API
• 聲明式依賴，極簡的資源任務管理
• 極致加載，全部資源任務都以最適合時刻加載
• 輕量體積(1.4kb Gziped), 極速啓動應用
• 幾乎無需修改邏輯，簡單幾步便可加速應用至極致！

應用示例

舉個栗子，應用會在運行前先把所需腳本準備穩當，以後會順序執行鑑權、受權、獲取數據、渲染。大多數的Web都會經過相似的模式去加載渲染。流程大體以下：

看似一種很直觀的方式卻很粗放，性能優化很是考驗咱們對資源任務加載的業務邏輯、依賴、順序的理解，精細化運營這些過程，Web性能能夠獲得意想不到地提高。咱們能夠大體整理一下應用的資源任務加載過程：

• 應用啓動

  • 依賴[ "首屏數據", "應用鑑權", "應用 Bundle 加載&執行"]
  • 啓動應用

• 應用鑑權

  • 依賴[ "加載鑑權 SDK", "得到用戶 ID" ]
  • 發起鑑權請求

• 首屏數據

  • 依賴[ "請求客戶端 axios" ]
  • 發起多個請求

能夠看到，有一部分資源任務是能夠正交進行的，這就是咱們充分利用瀏覽器特性提升性能的關鍵。可是，如此繁瑣的加載，維護起來並不容易。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	SSR
Server 支持	不須要	須要維護額外 SSR 服務器
Server 壓力	低，正常使用 CDN 方案	高，每次請求需 Server 支持
Client	無需改動業務邏輯	client-ssr 兩套版本
通用性	任何支持 JS 瀏覽器	簡單頁面，如客戶端鑑權狀況不支持
首屏渲染時間	快，無需浪費接口請求時間	極快，一次請求可獲取首屏內容
頁面空白時間	快速啓動，極大減小空白時間	大數據查詢接口，空白時間較長
可交互時長	短，腳本加載完成便可交互	中，ssr 後依舊須要徹底加載 bundle

最後

Loder做爲一個Web極致性能加載器，驅動Web高效加載渲染，經過性能跟蹤輔助發現&優化性能瓶頸，也促使咱們去思考如何組織Web的加載時序。

Links

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