Web加速器：Loder v1.0 发布 ?

NusterCache 发布于2019-08-26 11:34 / 2975人阅读

摘要：是一个轻量级加载器，通过合理地声明资源任务依赖关系，以最高效形式执行加载，提供强大的性能追踪，持续优化性能瓶颈。使用微核启动器，快速启动应用，利用在加载执行同时，展示交互发起鉴权初始数据请求等，最大化利用设备能力提高页面渲染性能。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107130.html

谷歌发布Kubernetes v1.0，容器生态前景明媚

摘要：与此同时，谷歌联合基金会及其他合作伙伴共同成立了基金会，并将作为首个编入管理体系的开源项目，助力容器技术生态的发展进步。年月谷歌宣布开源。年月容器引擎启动，谷歌宣布中支持容器及服务，并以为构架。 7月22日Google正式对外发布 Kubernetes v 1.0，意味着这个开源容器编排系统可以正式在生产环境使用。与此同时，谷歌联合linux基金会及其他合作伙伴共同成立了CNCF基金会...

Mertens 2019-06-28 14:58 评论0 收藏0
从零开始的webpack生活-0x009：FilesLoader装载文件

摘要：修改配置文件匹配的文件名，这里匹配后缀为的，只要了该文件名结尾的文件，都将使用这个来处理命中后使用的加载器查看结果，和之前一致，推荐使用配置文件形式，可以保持引入文件格式的一致性。有利于维护和美观更多配置，可以查阅关于部分。 0x001 概述上一章讲的是DLL加速编译，这一章开始讲loader相关的部分，但是关于plugin的部分善未完结，因为即将要讲的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 评论0 收藏0
En-Tan-Mo（ETM）项目周报（5月3日~5月9日）

摘要：经过三次全球公测，在稳定性方面已达到主网上线标准。在此基础上，研发团队将进一步改进，在中加入一种恢复回退机制，能极大提升共识机制与主网的稳定性。由此，在发生节点故障网络故障或数据库错误等极端情况时，主网都能够快速恢复。 showImg(https://segmentfault.com/img/bVbtKHf); 项目进展 Highlight：共识机制UPoS v1.5 稳定性全面提升 ...

vibiu 2019-08-16 18:04 评论0 收藏0
webpack v2升级踩坑笔记

摘要：从再到目前当红明星，前端模块打包技术日新月异，在今年月份和月份左右接连更新了和版本为了减少冗余模块，缩减文件大小，中也加入了关于的特征，可以查看知乎如何评价新引入的代码优化技术的讨论。从Grunt->gulp->webpack,再到目前当红明星rollup，前端模块打包技术日新月异，webpack在今年1月份和6月份左右接连更新了v2和v3版本,为了减少冗余模块，缩减bundle文件...

JayChen 2019-08-20 17:59 评论0 收藏0