「大前端新趋势」专场 何庚坤 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

基础篇：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 要求：基于

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 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.js)，将命令划分为9类：

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

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack

与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack http://127.0.0.1:8001/api/v1/order/new 谈谈 Web 商城的性能优化策略略 · 渲染优化 ·个⼈人中⼼心⻚页预渲染 · ⾸首⻚页、列列表⻚页、详情⻚页采⽤用 SSR 或者 Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端：

cache/webpack，最⼤ 500MB，缓存时常两个星期，旧的缓存先淘汰。 webpack 5 webpack 4 构建优化：Tree Shaking 优化-嵌套的 Tree shaking webpack 5 webpack 4 构建优化：Tree Shaking 优化-内部模块 Tree shaking 代码⽣成：⽀持⽣成 ES6 代码 webpack 4 之前只⽣成 ES5 的代码。

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack name: 'commons', chunks: 'all', minChunks: 2 } } } } } }; minuSize: 分离的包体积的⼤大⼩小 tree shaking(摇树优化) 概念：1 个模块可能有多个⽅方法，只要其中的某个⽅方法使⽤用到了了，则整个⽂文件都会被打到 bundle ⾥里里⾯面去，tree shaking 就是只把⽤用到的⽅方法打⼊入 bundle ，没⽤用到的⽅方法会在 为模板 设置占位符，动态插⼊入组件 ⾸首屏数据如何处理理？ 服务端获取数据 替换占位符 当前构建时的⽇日志显示 展示⼀一⼤大堆⽇日志，很多并不不需要开发者关注 统计信息 stats 如何优化命令⾏行行的构建⽇日志 module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output: {

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack txt$/, use: 'raw-loader' } ] } }; test 指定匹配规则 use 指定使⽤用的 loader 名称 核⼼心概念之 Plugins 插件⽤用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入 作⽤用于整个构建过程 常⻅见的 Plugins 有哪些？ Plugins 的⽤用法 const path = require('path'); module

关于 来源：https://github.com/nimojs/gulp-book gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 则需要使用 Ctrl + C 退出任务。 npm 模块管理器 如果你了解 npm 则跳过此章节 若你不了解npm 请阅读 npm模块管理器 安装 gulp npm 是 node 的包管理工具，可以利用它安装 gulp 所需的包。（在安装 node 时已经自动安装了 npm） 在命令行输入 npm install -g gulp 若一直没安装成功，请使用 cnpm 安装(npm的国内加速镜像) 开始帮我们干活吧！ gulp 入门指南 - 4 - 本文档使用 看云 构建 使用 gulp 压缩 JS 压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压 缩工作。 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。 规律 找到 js/ 目录下的所有 js 文件，压缩它们，将压缩后的文件存放在 dist/js/ 目录下。