「大前端新趋势」专场 何庚坤 2023年05月28日 本期议题：Rspack 基于 Rust 的高性能 Web 构建工具 About me 何庚坤 字节跳动前端工程师 Rspack 团队成员 GitHub @ahabhgk 目录 1. Rspack 是什么？ 2. Rspack 解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？ 的生态与未来 Rspack 是什么？ Rspack 是一个基于 Rust 的高性能构建引擎， 具备与 Webpack 生 态系统的互操作性，可以从 Webpack 低成本的迁移，并提供更好 的构建性能。 https://www.rspack.dev Rspack 解决了什么问题? ???️ 开发环境性能 巨型项目中 Dev 启动时间 5-10 分钟，HMR 时间 10-20 秒， Rspack 解决了什么问题? ??? 生产环境性能 巨型项目中 Build 时间 10-20 分钟，甚至更久，拖慢 CI/CD 效率 Rspack 解决了什么问题? ??? 灵活丰富的配置 不止覆盖 Web 开发场景，能够应对各种场景 Rspack 解决了什么问题? ??? 强大的生产环境优化 强大可自定义配置的拆包能力等决定了产物的性能 Rspack 解决了什么问题? ??? ♂️

CODE A BETTER LIFE 【前端篇】 前端 | 2021 1 让 Flutter 在鸿蒙系统上跑起来 1 FlutterWeb 在美团外卖的实践 14 FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 蒙系统大规模落地的步伐，预计 2021 年底，鸿蒙系统会覆盖包括手机、平板、智能 穿戴、智慧屏、车机在内数亿台终端设备。对移动应用而言，新的系统理念、新的交 互形式，也意味着新的机遇。如果能够利用好鸿蒙的开发生态及其特性能力，可以让 应用覆盖更多的交互场景和设备类型，从而带来新的增长点。 与面临的机遇相比，适配鸿蒙系统带来的挑战同样巨大。当前手机端，尽管鸿蒙系统 仍然支持安卓 APK 安装及运行，但长期来看，华为势必会抛弃 之外再重新开发和维护一套鸿蒙应用，在如今业界越来越注 重开发迭代效率的环境下，所带来的开发成本也是难以估量的。因此，通过打造一套 合适的跨端框架，以相对低的成本移植应用到鸿蒙平台，并利用好该系统的特性能 力，就成为了一个非常重要的选项。 在现有的众多跨端框架当中，Flutter 以其自渲染能力带来的多端高度一致性，在新 系统的适配上有着突出的优势。虽然 Flutter 官方并没有适配鸿蒙的计划，但经过一

JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 内容管理 托管／API 工具 后端即服务工具 离线工具 安全工具 构建工具 部署工具 4 1.7.38 1.7.39 1.7.40 1.7.41 网站／应用监控工具 JavaScript 错误报告／监控 性能工具 寻找工具的工具 5 前端开发者指南（2017） Introduction 6 作者：科迪·林黎（Cody Lindley），由「前端大师（Frontend 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 Introduction 8 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具

布系统等…… 新项⽬目 效率低，同质化，重复成本 核⼼心功能 应⽤用介绍 多⼯工程模板 ⼀一键集成SDK 快速⽣生成⻚页⾯面 接⼊入发布系统 DevOps H5、PC 查询、表单、图表 登录，监控、埋点 瓦匠 ⼯工程搭建 模板注⼊入 构建部署 项⽬目配置 技术挑战 应⽤用介绍 ⽂文件的IO 可视化编辑 模板的编译 命令的调⽤用 ⼯工程搭建 模板注⼊入 构建部署 项⽬目配置 缺点：集成Chromium，安装包⼤大 优点：接近Native性能，功能丰富，跨平台 缺点：库太⼤大，编译慢，开发周期⻓长 桌⾯面应⽤用开发选型 技术选型 C++/C#/C+……(Windows) Objective-C/Swift(Mac) Qt: (Windows/Mac) NW.js/Electron(Windows/Mac) 纯Native开发 开发框架 优点：性能好，安装包⼩小 缺点：开发周期⻓长，⽆无法跨平台 Clinet Server CrashReporter Crash Log 客户端版本多，⽤用户崩溃信 息收集困难 崩溃⽐比率和出错版本，咨询 ⽤用户，提供信息较少 Crashed Crash监控上报 IM打通报警 Crash SDK 项⽬目实践 #4如何定位和收集问题 错误信息 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 03 Electron

着丰富的前端经验，也热衷于技术的开源与 分享。每年，我们都会举办自己的前端大会 ——IMWebConf。 会议日程 会议日程 大会流程： 大会流程： Node.js会场 会场 框架性能会场 框架性能会场 综合会场 综合会场 会议嘉宾 会议嘉宾 姓名 姓名 个人介绍 个人介绍 主题 主题 主题介绍 主题介绍 Philippe Le Hégaret Philippe Le 前世今生 - 洪荒时代 - 英雄时代 - 工业时代 ## HTTP的奇妙旅程 - koa2的请求旅程 - 任人打扮HTTP ## 进阶妙想 - 巧用中间件 - 巧用多进程 - 性能监控 - RPC 郭达峰 Strikingly／上线了 的联合创始人。于 2010 年 开发了三款 Facebook 平台的应用，获取了超 过 2 千万的用户。2012 年创立了市面上最简易 体系有较深的理解，曾参与腾讯课堂、手Q会 员，吃喝玩乐，now直播等多项业务，具有较 丰富架构经验，著有书籍《现代前端技术解 析》 React组件的运行质 量监控方案 主要讲解react组件异常日志 的捕获方式与性能问题，包 括全局捕获、入侵式捕获和 无痕方式捕获。帮助react组 件开发者调试和线上质量改 进 WebAssembly作为一种新的 面向web的二进制格式，从

C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 + + 闲⻥鱼 - 让你的闲置游起来 Flutter 快速开发 亚秒级，有状态的热重载 原⽣生性能 渲染⽅方式、AOT、⽆无锁GC 统⼀一的应⽤用开发体验 两端⼀一致的开发⽅方式，MD和iOS⻛风格 闲⻥鱼 - 让你的闲置游起来 Flutter 快速开发 - Hot Reload 闲⻥鱼 混合开发：⼯工程管理理和混合栈管理理 外接纹理理播放视频 图⽚片缓存优化 ⽆无反射JSON序列列化 私有PUB库、阿⾥里里⽣生态适配 闲⻥鱼 - 让你的闲置游起来 Flutter和Native性能简单⽐比较 Flutter Native 45 FPS 30 FPS 113.2% 184.8% 闲⻥鱼 - 让你的闲置游起来 Flutter ⽣生产环境情况 内存问题 icudtl C++扩展 或 Service Mesh 服务集合 缓存 ⽇日志模块 开关 监控数据采集 5 : 1 原则 胶⽔水层多变 领域层少改 接⼝口服务 - 业务逻辑 闲⻥鱼 - 让你的闲置游起来 RT 单机QPS 系统资源 运⾏行行时⻓长 Dart Server ⽣生产环境情况 达到⽣生产稳定性，性能满⾜足“胶⽔水层”需求 闲⻥鱼详情⻚页所有流量量由Dart Server服务 闲⻥鱼

⽀支持多平台 可动态发布 体验差 能⼒力力弱 Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 前终端⼀一体化 开发效率⾼高 ⽀支持双平台 可动态发布 能⼒力力强 体验好 Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy • Hippy SDK 是⼀一套多端统⼀一的开发框架，它能通过 JavaScript ⾼高效率地开发出：跨平台（安卓/iOS/ Web）、⾼高性能的原⽣生应⽤用，尤其适合需要快速迭代⼜又追求⾼高性能的产品。 • Hippy 管理理平台 涵盖编译、发布、监控等动态运营所需的各个环节，并⽀支持灰度⽐比例例、ABTest、差量量包等 ⾼高级特性。 Android Platform iOS Platform ⽀支持最流⾏行行的框架 向阳⽽而⽣生 代码即将对外开源 （ 发布平台） User Code JavaScript Hippy 底层三⼤大特性 ⾼高性能可复⽤用滚动列列表 动画和⼿手势实现 X5 内核团队提供⽀支持 项⽬目架构 Hippy SDK 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境；

直播协议的低延迟替代方案 WebRTC 可以做什么 02. 副标题 • 用实现网页音/视频通话 • 低延迟直播系统(在线课堂) • 多人视频会议系统 • 高质量SIP/VOIP系统 • 视频监控系统 • 机器学习，视觉计算等 如何使用它 01. 副标题 • 在Web中使用JS API • 基于google libwebrtc实现原生客户端开发 (ios/android/c++) WebRTC框架（防火墙，编译环境） • 原生SDK开发(每平台人力投入) • UI 的一致性，更新迭代（类似SDK需按平台维护） • 性能问题(全部使用html5) 客户端是否有 更好的选择？ 为何选择 Flutter • 同样是 Google 发起的跨全平台高性能UI框架 • 基于 Skia 2D 渲染引擎 • 使用类似JS/TS的Dart 语言开发 • 支持代码编辑后热重载, Flutter 基于pion/webrtc 开发 pion/ion-sfu • 分布式架构 • 基于grpc over NATS mq • 使用redis 存储媒体流全局位置 • 支持业务自定义开发 • 高性能，单个ion-sfu节点 1k 并发仅需 0.5核 ION 架构 多node 架构 主要模块 • ISLB 服务发现，负载均衡，媒体信息全局存储 • Biz 业务接入模块 • SFU 节点

demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi"); 此时 dist/js 目录下的 .js 文件都是压缩后的版本。 你还可以监控 js/ 目录下的 js 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它 帮助你自动构建 Web 项目。 gulp 还可以做很多事，例如： 1. 压缩CSS 2. gulp.task('default', ['script', 'auto']) 去除注释后，你会发现只需要 11 行代码就可以让 gulp 自动监听 js 文件的修改后压缩代码。但是还有还 有一些性能问题和缺少容错性，将在后面的章节详细说明。 gulp 入门指南 - 10 - 本文档使用 看云 构建 使用 gulp 压缩 CSS 压缩 css 代码可降低 css 文件大小，提高页面打开速度。 本文档使用 看云 构建 [20:39:52] Starting 'js'... [20:39:52] Finished 'js' after 14 ms gulp-watch-path 此配置有个性能问题，当 gulp.watch 检测到 src/js/ 目录下的js文件有修改时会将所有文件全部编译。 实际上我们只需要重新编译被修改的文件。 简单介绍 gulp.watch 第二个参数为

具有可行性，可在有限步骤、有限时间、有限内存空间下完成。 ‧ 独立于编程语言，即可用多种语言实现。 1.2.2. 数据结构定义 「数据结构 Data Structure」是在计算机中组织与存储数据的方式。为了提高数据存储和操作性能，数据结构 的设计原则有： ‧ 空间占用尽可能小，节省计算机内存。 ‧ 数据操作尽量快，包括数据访问、添加、删除、更新等。 1. 引言 hello‑algo.com 10 ‧ 提供简洁的数据表示和逻辑信息，以便算法高效运行。 ，都能够解决同一问题，现在需要对比两个算法之间的效率。我们能够想到 的最直接的方式，就是找一台计算机，把两个算法都完整跑一遍，并监控记录运行时间和内存占用情况。这种 评估方式能够反映真实情况，但是也存在很大的硬伤。 难以排除测试环境的干扰因素。硬件配置会影响到算法的性能表现。例如，在某台计算机中，算法 A 比算法 B 运行时间更短；但换到另一台配置不同的计算机中，可能会得到相反的测试结果。这意味着我们需要在各种机 少空间，而是给出一种“趋势性 分析”； 复杂度分析克服了实际测试方法的弊端。一是独立于测试环境，分析结果适用于所有运行平台。二是可以体现 不同数据量下的算法效率，尤其是可以反映大数据量下的算法性能。 如果感觉对复杂度分析的概念一知半解，无需担心，后续章节会展开介绍。 2.1.3. 复杂度分析重要性 复杂度分析给出一把评价算法效率的“标尺”，告诉我们执行某个算法需要多少时间和空间资源，也让我们可