「大前端新趋势」专场 何庚坤 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 解决了什么问题? ??? ♂️

Adventure 2.3 服务端渲染改进 ● 在存在代码分割的情况下，通过分析 Webpack 服 务端和客户端的构建信息，自动推导需要在客户端 预加载的文件，生成最优的 ECMAScript 6简介 17 注意，网页实时将 ES6 代码转为 ES5，对性能会有影响。生产环境需要加载已经 转码完成的脚本。 下面是如何将代码打包成浏览器可以使用的脚本，以 Babel 配合 Browserify 为 例。首先，安装 babelify 模块。 $ 的数值（比 如 \u20BB7 ），JavaScript会理解成 \u20BB+7 。由于 \u20BB 是一个不可打印 字符，所以只会显示一个空格，后面跟着一个 7 。 ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。 字符串的扩展 63 "\u{20BB7}" // "" "\u{41}\u{42}\u{43}" // "ABC" let hello =