「大前端新趋势」专场 何庚坤 2023年05月28日 本期议题：Rspack 基于 Rust 的高性能 Web 构建工具 About me 何庚坤 字节跳动前端工程师 Rspack 团队成员 GitHub @ahabhgk 目录 1. Rspack 是什么？ 2. Rspack 解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？ 灵活丰富的配置 不止覆盖 Web 开发场景，能够应对各种场景 Rspack 解决了什么问题? ??? 强大的生产环境优化 强大可自定义配置的拆包能力等决定了产物的性能 Rspack 解决了什么问题? ??? ♂️ 方便从原有方案（Webpack）迁移 用最小的成本优化巨型项目的开发体验 Rspack 解决了什么问题? ??? 社区现有方案往往能解决其中一两个问题， 但没有一个方案能解决所有问题 Rspack 有哪些特性？ ??? 快！ performance is the best feature! Rspack 有哪些特性？ ??? Rust 实现核心部分，充分利用并发和 LTO 优化 Rspack 有哪些特性？ ???️ O(≈1) 增量 HMR，只编译修改的模块 Rspack 有哪些特性？ ⚡️ Dev 启动耗时 Rspack 有哪些特性？ 一些业务收益 Webpack

后浪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语言简介

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf） 默认使用更快的 md4 hash 算法 webpacks AST n 缩小构建目标 比如 babel-loader 不解析 node_modules 目的：尽可能的少构建模块 减少文件搜索范围 优化 resolve.mainFields 配置 优化 resolve.modules 配置（减少模块搜索层级） 优化 resolve.extensions 配置 合理使用 alias 图片压缩 使用：配置 image-webpack-loader 要求：基于

Flutter 在鸿蒙系统上跑起来 1 FlutterWeb 在美团外卖的实践 14 FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 React Native 在美团外卖客户端的实践 506 Android 静态代码扫描效率优化与实践 530 Probe：Android 线上 OOM 问题定位组件 560 活动 Web 页面人机识别验证的探索与实践 580 React Native 工程中 TSLint 静态检查工具的探索之路 589 ESLint 在中大型团队的应用实践 610 美团 iOS 工程 zsource 层（黄色部分），利用 DOM、Canvas 对齐了 Flutter Native 的 UI 渲染能力，使得 Flutter 编写的 UI 能够在现代浏览器上正常展示。 此外，得益于 dart2js 这个早已成熟的工具，Dart 逻辑能够很容易的转换为 JavaS- cript，进而在 Web 中被正常运行。 二、面临的挑战 综上所述，我们选择基于 Flutter Web 探索跨端（App\PC\H5）解决方案，真正实

学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 2 1.6.1.14 1.6.1.15 1.6.1.16 1.6.1 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 Doc/API Doc/API 浏览工具 SEO 工具 原型设计和线框图工具 制图工具 3 1.7.5 1.7.6 1.7.7 1.7.8 1.7.9 1.7.10 1.7.11 1.7.12 1.7.13 1.7.14 1.7.15 1.7.16 1.7.17 1.7.18 1.7.19 1.7.20 1.7.21 1.7.22 1.7.23 1.7.24 1.7.25

巴B2B和腾讯IMWeb。 2012年就职于腾讯IMWeb，负责IMQQ官网已 经公司内部产品体验环境优化。 2014年就职于阿里巴巴B2B，负责1688商家平 台前端开发。 现在在饥人谷从事前端培训行业。 我从TJ身上学到了什 么 1. 从 Ruby 社区学习 2. 从 TJ 的代码中学习 主要涉及前端框架、工具、 社区文化等方面的知识。 jeffreyluo(罗嘉 辉) 腾讯SNG高级前端工程师，2013 腾讯SNG高级前端工程师，2013 加入腾讯， 先后负责微信钱包，QQ钱包相关业务，现在是 QQ钱包，QQ智慧校园的核心开发者，喜欢前 端技术，在框架/工具方面有较深的经验沉淀。 QQ钱包优化实践 1. 性能优化：service worker 在QQ钱包的实践 2. 生产力优化： 打造QQ钱 包专属辅助系统 kavinkhuang(黄 伟明) 黄伟明，腾讯Web前端高级工程师。2011年加 入腾讯，先后负责QQ会员游戏特权、QQ钱包 Server Web)组件的核心开发者 和维护者，本次主要解析在TSW演进中沉淀下 来的Node.js请求抓包工具的原理，该工具可以 将单次用户访问涉及到的所有请求打包成 Fiddler可以查看的saz包，下载到本地进行查 看和重放调试。 TSW抓包原理解析 1. 工具的背景和诉求 2. 染色体系建立 3. 请求包体记录 4. 打包下载查看 jackqqxu(徐杰) 徐杰，腾讯Web前端高级工程师，QQ空间个性

- 2 - 本文档使用 书栈网 · BookStack.CN 构建 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合 使用TypeScript的每日构建版本 Wiki TypeScript里的this 《TypeScript 4.0 使用手册》 由 进击的皇虫 使用 书栈网(BookStack.CN) 进 行构建，生成于 2020-09-09。 书栈网仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工具。 文档内容由网友们编写和整理，书栈网难以确认文档内容知识点是否错漏。如果您在阅读文档获取 知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手，将知识准确、高效且有 效地传递给每一个人。 JavaScript文件里的类型检查 实用工具类型 如何书写声明文件 介绍 目录 README - 8 - 本文档使用 书栈网 · BookStack.CN 构建 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合 使用TypeScript的每日构建版本

JS）增加依赖注入 ✔ 9. 数据绑定 ✔ ✔ 10. 直接操作DOM元素 ✔ ✔ 11. 模块化 ✔ ✔ 测试 测试 12. 自动测试支持 通过扩展工具实现 ✔ 13. 测试框架或者测试工具 许多第三方的测试框架，比如 Siesta (专门为ExtJS优化), Jasmine and Mocha 能够用于ExtJS的测试 AngularJS 自带了Karma用于端对端的测 试。 Protractor headless browser support in you r web-server. 部署 部署 25. 编译工具 ExtJS 4.x以上版本使用Sencha 命令工具 Sencha sdk 工具用于升级 ExtJS 3.x 第三方的 Grunt工具 26. 包管理工具 Sencha cmd工具 Yeoman, Grunt 和 Bower Licensing and Support 27. 协议 ExtJS应用能够使用第三方的测试框架来测试，比如 Siesta (专门为 Ext JS 优化)，Jasmine 和Mocha. 自身并不包含测试框架和测试工具 AngularJS： AngularJS在设计之初，就考虑到了应用的可测试性 支持单元测试，集成测试和功能 AngularJS 团队开发了 Karma 测试工具。 另外，第三方的工具 Protractor 也可以用于AngularJS的测试 数据绑定 数据绑定

1 版权说明 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 本书制作用到的工具 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 意见和疑问 . . . . . . . . . 生小巅峰。 当然，我也在想，如果能得到读者的认可，自己的小心脏肯定会砰砰的。 本书制作用到的工具 本书采用 Asciidoc 格式编写。 使用 Asciidoctor 构建本书电子版。 教程: • 语法教程 • 转换PDF教程 书中用的可视化图片是由 Regulex 正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 match(regex)[0]); // => id="container" 当然，这样也会有个问题。效率比较低，因为其匹配原理会涉及到“回溯”这个概念（这里也只是顺便提一 下，第四章会详细说明）。可以优化如下： var regex = /id="[^"]*"/ var string = ''; console.log(string

1 版权说明 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 本书制作用到的工具 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 意见和疑问 . . . . . . . . . 人生小巅峰。 当然，我也在想，如果能得到读者的认可，自己的小心脏肯定会砰砰的。 本书制作用到的工具 本书采用Asciidoc格式编写。 使用 Asciidoctor 构建本书电子版。 教程: • 语法教程 • 转换PDF教程 书中用的可视化图片是由 Regulex 正则表达式可视化工具生成。 其余图片是由 Processon 制作。 JavaScript 正则表达式迷你书 前言 match(regex)[0]); // => id="container" 当然，这样也会有个问题。效率比较低，因为其匹配原理会涉及到“回溯”这个概念（这里也只是顺便提一 下，第四章会详细说明）。可以优化如下： var regex = /id="[^"]*"/ var string = ''; console.log(string