何庚坤 字节跳动前端工程师 Rspack 团队成员 GitHub @ahabhgk 目录 1. Rspack 是什么？ 2. Rspack 解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？ 5. Rspack 的架构设计 6. Rspack 的生态与未来 Rspack 是什么？ Rspack 是一个基于 Rust 的高性能构建引擎， Rspack 有哪些特性？ ??? 快！ performance is the best feature! Rspack 有哪些特性？ ??? Rust 实现核心部分，充分利用并发和 LTO 优化 Rspack 有哪些特性？ ???️ O(≈1) 增量 HMR，只编译修改的模块 Rspack 有哪些特性？ ⚡️ Dev 启动耗时 Rspack 有哪些特性？ 一些业务收益 Webpack 59s 9 倍 dev 243s 24s 10 倍 hmr 18s 1.4s 13 倍 Rspack 有哪些特性？ ??? 与 Webpack 部分兼容 The subset of Webpack! Rspack 有哪些特性？ ⚙️ 常用配置兼容 Rspack 有哪些特性？ ??? 常用 Loader 兼容 • babel-loader • style-loader • css-loader

CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 webpack 5 在 2020-10-10 正式发布 官方 changelog：https://webpack.js.org/blog/2020-10-10-webpack-5-release/ webpack 5 新特性概览 最低支持的 Node.js 版本从 则现在既可以⽣成 ES5 ⼜可以⽣成 ES6/ES2015 代码。 两种设置⽅式：5 =< ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020 开创性的特性：模块联邦 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 webpack 构建 • Host：依赖⽅，消费其他 Remote 的 webpack 构建 一个应用可以是 Host，也可以是 Remote，也可以同时是 Host 和 Remote。 开创性的特性：ModuleFederationPlugin 介绍 Webpack 内部通过 ModuleFederationPlugin 插件将多个应⽤结合起来。 • name：必须，唯⼀ ID，作为输出的模块名，使⽤的时通过