的高性能 Web 构建工具 About me 何庚坤 字节跳动前端工程师 Rspack 团队成员 GitHub @ahabhgk 目录 1. Rspack 是什么？ 2. Rspack 解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？ 5. Rspack 的架构设计 6. Rspack 的生态与未来 Rspack 是什么？ 是什么？ Rspack 是一个基于 Rust 的高性能构建引擎， 具备与 Webpack 生 态系统的互操作性，可以从 Webpack 低成本的迁移，并提供更好 的构建性能。 https://www.rspack.dev Rspack 解决了什么问题? ???️ 开发环境性能 巨型项目中 Dev 启动时间 5-10 分钟，HMR 时间 10-20 秒， 甚至更久，开发体验极差 Rspack 倍 Webpack Rspack 提升 build 508s 59s 9 倍 dev 243s 24s 10 倍 hmr 18s 1.4s 13 倍 Rspack 有哪些特性？ ??? 与 Webpack 部分兼容 The subset of Webpack! Rspack 有哪些特性？ ⚙️ 常用配置兼容 Rspack 有哪些特性？ ??? 常用 Loader 兼容 • babel-loader

后浪Flutter Google 开源的 UI 工具包 陈孟泽 后浪Flutter • 简介：移动跨平台方案及Flutter介绍 • 语言: Dart语言简介 • 基础：Flutter常用知识点 • 进阶：Flutter核心原理 • 资料：学习参考资料 移动跨平台方案 • H5+原生（Cordova、微信小程序） • JavaScript开发+原生渲染 （React Native、Weex、快应用） JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染 好 高 默认不支持 Flutter Flutter简介 • Google 开源的 UI 工具包 • 非常精美丰富的组件库 • 支持移动、Web、桌面和嵌入式平台 • UI统一、高性能 Flutter简介 Dart语言简介 - 变量声明 Dart语言简介 - 函数声明 Dart语言简介 Checkbox • TextField 布局组件 • 线性布局（Row和Column） • 弹性布局（Flex） • 流式布局（Wrap、Flow） • 层叠布局（Stack） • 对齐与相对定位（Align） 容器组件 • 填充（Padding） • 尺寸限制（ConstrainedBox、SizedBox、） • 移除子组件限制（UnconstrainedBox） • 装饰容器（DecoratedBox）

Vue 2017 现状与展望 尤雨溪 @VueConf Beijing 2017.05.20 起源 Origination First commit 2013.06.27 First appearance of “Vue” 2013.12.07 First public release (0.8) 2014.02.01 2014.11.06 v0.11 Cowboy Bebop CSS 改进：>>> 和 ::slotted 选择器， CSS variable theming ● 基于 Proxy 的响应式系统重构 ○ 不再需要 Vue.set 或者 this.$set ○ Lazy observation ○ 显式构建响应式对象 ● HTML Modules: 类似单文件组件的新标准（由 Google 起草中） ● 与 Web Components 的兼容

JavaScript极速入门 —— 内核与引擎 主讲人与课程设计：耕耕 浏览器内核 主流浏览器内核 JavaScript 引擎 主流浏览器JavaScript 引擎 浏览器内核与JavaScript 引擎关系 最初内核的概念包括渲染引擎与JS引擎，目前习惯直接称渲染引擎为内核，JS引擎独立。 浏览器内核 渲染引擎 JavaScript引擎 最初状态 浏览器内核 渲染引擎 JavaScript引擎 目前状态 JavaScript引擎独立了 渲染引擎与JavaScript 引擎 渲染引擎：Rendering Engine，一般习惯将之称为“浏览器内核”，主要功能是解析HTML/CSS进 行渲染页面，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 JavaScript 引擎：专门处理JavaScript脚本的虚拟机、解释器，用来解释执行js代码。在早期内 核也是包含js引擎的 核也是包含js引擎的，而现在js引擎越来独立了，可以把它单独提出来。 总结：渲染引擎（浏览器内核）处理html/css，JavaScript引擎处理JavaScript代码，有js引擎的 地方就能解析js代码 浏览器 渲染引擎（内核） 解析html/css JavaScript引擎 解析JavaScript代码 JavaScript和java什么关系 JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时

在美团外卖的实践 14 FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 外卖客户端容器化架构的演进 270 Flutter 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 352 积木 Sketch 插件进阶开发指南 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 静态代码扫描效率优化与实践 530 Probe：Android 线上 OOM 问题定位组件 560 活动 Web 页面人机识别验证的探索与实践 580 React Native 工程中 TSLint 静态检查工具的探索之路 589 ESLint 在中大型团队的应用实践 610 美团 iOS 工程 zsource 命令背后的那些事儿 627 客户端单周发版下的多分支自动化管理与实践 635

2.12 3 3.1 3.2 目录 介绍 快速上手 5分钟了解TypeScript ASP.NET Core ASP.NET 4 Gulp Knockout.js React与webpack React Angular 2 从JavaScript迁移到TypeScript 新增功能 TypeScript 2.4 TypeScript 2.3 TypeScript 7.4 7.5 7.6 7.7 7.8 7.9 编译选项 在MSBuild里使用编译选项 与其它构建工具整合 使用TypeScript的每日构建版本 Wiki TypeScript里的this 编码规范 常见编译错误 支持TypeScript的编辑器 结合ASP.NET v5使用TypeScript 架构概述 发展路线图 Breaking Changes TypeScript TypeScript是Microsoft公司注册商标。 TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript 代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。 TypeScript目前还在积极的开发完善之中，不断地会有新的特性加入进来。 因此本 手册也会紧随官方的每个commit，不断地更新新的章节以及修改措词不妥之处。

致谢 README Introduction 快速上手 5分钟了解TypeScript ASP.NET Core ASP.NET 4 Gulp Knockout.js React与webpack React Angular 2 从JavaScript迁移到TypeScript 手册 基础类型 变量声明 接口 类 函数 泛型 枚举 类型推论 类型兼容性 - 2 - 本文档使用 书栈网 · BookStack.CN 构建 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合 使用TypeScript的每日构建版本 Wiki TypeScript里的this TypeScript里的this 编码规范 常见编译错误 支持TypeScript的编辑器 结合ASP.NET v5使用TypeScript 架构概述 发展路线图 新增功能 TypeScript 4.0 TypeScript 3.9 TypeScript 3.8 TypeScript 3.7 TypeScript 3.6 TypeScript 3.5 TypeScript 3.4

致谢 向导 支持平台 分发应用 提交应用到 Mac App Store 打包应用 使用 Node 原生模块 主进程调试 使用 Selenium 和 WebDriver 使用开发人员工具扩展 使用 Pepper Flash 插件 使用 Widevine CDM 插件 教程 快速入门 桌面环境集成 在线/离线事件探测 API文档 简介 进程对象 支持的 Chrome remote webFrame 在两种进程中都可用的模块 clipboard crashReporter nativeImage screen shell 开发 代码规范 源码目录结构 与 NW.js（原 node-webkit）在技术上的差异 构建系统概览 构建步骤（macOS） 构建步骤（Windows） 构建步骤（Linux） 在调试中使用 Symbol Server 由 进击的皇虫 使用 书栈(BookStack.CN) 进行构建，生成于 2019- 03-06。 书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工具。 文档内容由网友们编写和整理，书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档 获取知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手，将知识准确、高效且有效地传递

目 录 致谢 基础 安装 介绍 应用 & 组件实例 模板语法 Data Properties and Methods 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 深入组件 组件注册 Props 非 Prop 的 Attribute 自定义事件 插槽 提供 / 注入 动态组件 & 异步组件 构建 响应性 深入响应性原理 响应式原理 响应式计算和侦听 组合 API 介绍 Setup 生命周期钩子 提供/注入 模板引用 渲染机制和优化 Vue 2 中的更改检测警告 工具 单文件组件 测试 TypeScript 支持 Mobile 规模化 路由 状态管理 服务端渲染 无障碍 基础 语义学 标准 资源 从 Vue 2 迁移 介绍 v-for Attribute key attribute 按键修饰符 在 prop 的默认函数中访问 this 渲染函数 API Slot 统一 过渡的 class 名更改 v-model v-if 与 v-for 的优先级对比 v-bind 合并行为 贡献文档 Vue 文档编写指南 文档风格指南 翻译 - 4 - 本文档使用 书栈网 · BookStack.CN 构建 致谢 当前文档

而开发 团队里的前端 全能型人才/全栈神话 前端面试 前端开发职位公示 前端开发薪资 前端开发者是如何诞生的 第二部分：学习前端开发 自学 关于互联网／WEB 学习 Web 浏览器 学习域名系统（又叫 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 学习可访问性相关知识 学习 web／浏览器 API 学习 JSON (JavaScript 对象表示法) 学习 JS 模板 学习静态网页生成器 通过JS学习计算机科学 学习前端应用架构 学习数据（例如，JSON）API 的设计 学习 React & Redux 学习渐进式 Web 应用 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 Doc/API 浏览工具 SEO 工具 原型设计和线框图工具 制图工具 3 1.7.5