的高性能 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

关于 来源：https://github.com/nimojs/gulp-book gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 // 跳转至 C 盘根目录 cd c:\ // 跳转至当前目录的 demo 文件夹 cd demo // 跳转至上一级 cd .. Mac Mac 中建议只在 Documents 目录下进行文件操作。 gulp 入门指南 - 3 - 本文档使用 看云 构建 // 跳转至文档目录 cd /Users/你的用户名/Documents/ // 或第一次打开终端时直接输入 cd Documents 进行其他操作。可通过 Ctrl + C 停止 gulp。（Mac 中使用 control + C ） 后面的章节中如果代码中存在 gulp.watch 并在命令行运行了 gulp 则需要使用 Ctrl + C 退出任务。 npm 模块管理器 如果你了解 npm 则跳过此章节 若你不了解npm 请阅读 npm模块管理器 安装 gulp npm 是 node 的包管理工具，可以利用它安装

建配置，和 webpack 打包优化 详细剖析 webpack 打包原理理 和插件、Loader 的实现 从实际 Web 商城项⽬目出发， 讲解 webpack 实际使⽤用 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 为什什么需要构建⼯工具？ 转换 ES6 语法 转换 JSX 压缩混淆 ES6 module 主流浏览器器⽀支持情况 图⽚片压缩 CSS 前缀补全/预处理理器器 前端构建演变之路路 ant + YUI Tool grunt gulp fis3 webpack parcel

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 build 通过 webpack 直接运行 ·webpack entry.js bundle.js 这个过程发生了 什么？ 查找 webpack 入口文件 在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目录 查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不 存在，就抛出错误。 实际的入口文件是：node_modu //返回与本地环境相关的一些信息 ]; webpack-cli 提供的不需要编译的命令 命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 1%", "iOS 7"] + }) + ] + } + } ] } ] } }; 浏览器器的分辨率 CSS 媒体查询实现响应式布局 缺陷：需要写多套适配样式代码 @media screen and (max-width: 980px) { .header { width: 900px; //将所有的style标签合并成一个 } }, "css-loader", "sass-loader" ], }, ] }, }; 多⻚页⾯面应⽤用(MPA)概念 每⼀一次⻚页⾯面跳转的时候，后台服务器器都会给返回⼀一个新的 html ⽂文档， 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多⻚页应⽤用。 多⻚页⾯面打包基本思路路 module.exports = { entry: { index:

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 构建是否成功 判断构建是否成功 在示例项目里面运行构建，看看是否有报错 判断基本功能是否正常 ·是否有 JS、CSS 等静态资源文件 编写 mocha 测试用例 ·是否有 HTML 文件 单元测试与测试覆盖率 单纯的测试框架，需要断言库 集成框架，开箱即用 极简 API ·chai ·should.js ·expect ·better-assert 编写单元测试用例 技术选型：Mocha

玩转 webpack 腾讯IVWEB 程柳柳锋 扫码试看/订阅 《玩转 webpack》 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 + "watch": "webpack --watch" }, "keywords": [], "author": "", "license": "ISC" } 唯⼀一缺陷：每次需要⼿手动刷新浏览器器 ⽂文件监听的原理理分析 轮询判断⽂文件的最后编辑时间是否变化 某个⽂文件发⽣生了了变化，并不不会⽴立刻告诉监听者，⽽而是先缓存起来，等 aggregateTimeout module.export ”dev": "webpack-dev-server --open" }, "keywords": [], "author": "", "license": "ISC" } WDS 不不刷新浏览器器 WDS 不不输出⽂文件，⽽而是放在内存中 使⽤用 HotModuleReplacementPlugin插件 热更更新：使⽤用 webpack-dev-middleware const express

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 API Imagemin的优点分析 可以引入更多第三方优化插件，例如pngquant 有很多定制选项 可以处理多种图片格式 Imagemin的压缩原理 pngquant: 是一款PNG压缩器，通过将图像转换为具有alpha通道（通常比24/32位PNG 文件小60-80％）的更高效的8位PNG格式，可显著减小文件大小。 pngcrush:其主要目的是通过尝试不同的压缩级别和PNG过滤方法来降低PNG CSS 如何删除掉？ uncss: HTML 需要通过 jsdom 加载，所有的样式通过PostCSS解析，通过 document.querySelector 来识别在 html 文件里面不存在的选择器 PurifyCSS: 遍历代码，识别已经用到的 CSS class 在 webpack 中如何使用 PurifyCSS? 使用 purgecss-webpack-plugin 和 mini-css-extract-plugin

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 ⽀支付服务 评论服务 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 主⻚页 类⽬目⻚页 详情⻚页 登陆/注册 前台模块拆分 后台模块拆分 React 全家桶环境搭建 · 初始化项⽬目 npm init -y · 创建项⽬目⽬目录 · 安装 r Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端： · 服务端： · MVC 开发⽅方式，数据库基于 Sequelize · Rest API ⻛风格 ·采⽤用 JWT 进⾏行行鉴权 ·组件化，组件颗粒度尽可能⼩小 ·直接复⽤用 b

和 bundless 的差异 02 Vite 的构建原理 03 Vite 发布 2.0 版本 更早实践 bundless 的⼯具：Snowpack 真的可以不⽤打包吗？ 浏览器对 ESM 的⽀持情况 各浏览器在 HTTP/1.1 协议下的最大并行请求数限制 HTTP/1.1 的请求数限制 HTTP/2 越来越多的应⽤在主流⽹站 bundle bundless a.js b.js 静态⽂件托管服务 文件路径：src/node/server/index.ts 处理裸导⼊（bare import）的模块路径，eg: import react from 'react'; 浏览器（只有相对路径和绝对路径）无法识别，因 此需要重写模块路径 Vite 打包流程 – 重写模块路径 文件路径：src/node/server/serverPluginModuleRewrite.ts 的开头补上一个 /@modules 的标识符。 如：import React from "/@modules/@pika/react/source.development.js" 相对路径转绝对路径，方便浏览器请求。 补齐文件扩展名和经常被省略的 index.xxx 如：import a from ’/src/a/index.js’ 给非 js 类型（js 类型：如 js(x)/ts(x)/vue）的文件地址加上