都在卷打包工具 又有什么特性 Rspack
Hello,大家好,我是 Sunday。
Webpack 作为最经典的 前端打包工具,这几年过的可真是不太平。
前有 Vite 产生,号称可以 “推翻 webpack”。后有webpack开创人推出新的打包工具 Turbopack,号称比 webpack 快 700 倍。
这不,三天前(8月28日),字节跳动也推出了全新的打包工具 Rspack,号称 能够无缝交流 webpack, 并提供闪电般的构建速度
那么到目前为止,Rspack 也正式推出 3 天了,所以当天我们就来看看它吧!
制造 Rspack 的初衷
依据原生团队形容:Rspack 的推出,最后是为了处置字节外部 巨石运行 的疑问。
经常使用 webpack 时,每次编译都须要耗时 十几分钟,甚至半个小时的期间,并且基于 webpack 的提升收效甚微,因此才有了构建 Rspack 的需求。
整个构建的环节,遵照以下 4 个规范:
体验下 Rspack
整个 Rspack 的经常使用场景关键分为两种:
间接经常使用 Rspack 创立全新名目
这种操作比拟便捷,与经常使用 vue-cli、vite、CRA 的区别并不大
官网 介绍经常使用 Rsbuild 创立名目
Rsbuild 是由 Rspack 驱动的高性能构建工具,由 Rspack 团队开发。它自动蕴含了一套精心设计的构建性能,提供开箱即用的开发体验,并能够充散施展出 Rspack 的性能长处。
npm create rsbuild@latest
从 webpack 中迁徙
这应该是很多同窗真正的痛点了。
假设大家也在现有名目中饱受 编译过慢 的疑问,那么无妨可以启动一下尝试。
在这里,Rspack 提供了多种迁徙方案:
我们以 vue-cli 为例,整个迁徙环节比拟平滑:
1. 装置依赖
首先你须要把 Vue CLI 的 npm 依赖交流为 Rsbuild 的依赖。
移除 Vue CLI 的依赖:
npm remove @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint core-js
装置 Rsbuild 的依赖:
npm add @rsbuild/core @rsbuild/plugin-vue -D
2. 降级 npm scripts
下一步,你须要把 package.json 中的 npm scripts 降级为 Rsbuild 的 CLI 命令。
{"scripts": {-"serve": "vue-cli-service serve",-"build": "vue-cli-service build",+"serve": "rsbuild dev",+"build": "rsbuild build",+"preview": "rsbuild preview"}}
3. 创立性能文件
在 package.json 的同级目录下创立 Rsbuild 的性能文件 rsbuild.config.ts,并减少以下内容:
import { defineConfig } from '@rsbuild/core';import { pluginVue } from '@rsbuild/plugin-vue';export default defineConfig({plugins: [pluginVue()],source: {// 指定入口文件entry: {index: './src/main.js',},},});
4. HTML 模板
Vue CLI 自动经常使用 public/index.html 文件作为 HTML 模板。在 Rsbuild 中,你可以经过 html.template 来指定 HTML 模板:
// rsbuild.config.tsexport default defineConfig({html: {template: './public/index.html',},});
在 HTML 模板中,假设经常使用了 Vue CLI 的 BASE_URL 变量,请交流为 Rsbuild 的 assetPrefix 变量,并经常使用斜杠启动衔接:
-<link href="<%= BASE_URL %>favicon.ico">+<link href="<%= assetPrefix %>/favicon.ico">
这样就成功了从 Vue CLI 到 Rsbuild 的基本迁徙,此时你可以口头 npm run serve 命令来尝试启动开发主机。
5. 性能迁徙处置方案
局部性能方案须要启动交流:
6. 环境变量处置方案
Vue CLI 自动会将 VUE_APP_ 扫尾的环境变量注入到 client 代码中,而 Rsbuild 自动会注入 PUBLIC_ 扫尾的环境变量(参考 public 变量)。
为了兼容 Vue CLI 的行为,你可以手动调用 Rsbuild 提供的 loadEnv 方法来读取 VUE_APP_ 扫尾的环境变量,并经过 source.define 性能项注入到 client 代码中。
// rsbuild.config.tsimport { defineConfig, loadEnv } from '@rsbuild/core';const { publicVars } = loadEnv({ prefixes: ['VUE_APP_'] });export default defineConfig({source: {define: publicVars,},});
和其余构建工具的对比
每个工具产生之后,都会和其余的工具对比一番,并借此形容出 “自己的各种长处”。
因此,这种对比或许并没有那么的“公正(毕竟大佬针对特定场景下性能疑问的撕逼状况也并不少见)”。因此 该局部仅供参考
和 webpack 的区别
webpack 是目前最为成熟的构建工具,有着生动的生态,灵敏的性能和丰盛的性能,但是其最为人诟病的是其性能疑问,尤其在一些大型名目上,构建破费的期间或许会到达几分钟甚至几十分钟,性能疑问是目前 webpack 最大的短板。因此 Rspack 处置的疑问外围就是 webpack 的性能疑问。 Rspack 比 webpack 快得益于如下几方面:
和 Vite 的区别
Vite 提供了很好的开发者体验,但 Vite 在消费构建中依赖了 Rollup ,因此与其余基于 JavaScript 的工具链一样,面临着消费环境的构建性能疑问。
另外,Rollup 相较于 webpack 做了一些平衡取舍,在这里雷同实用。比如,Rollup 缺失了 webpack 关于拆包的灵敏性,即缺失了 optimization.splitChunks 提供的很多性能。
和 esbuild 的区别
我们在外部启动过大规模地将 esbuild 作为通用的 Web App 构建工具的通常,但是遇到如下一些疑问:
不足对 JavaScript HMR 和增量编译的良好允许,这造成大型名目中的 HMR 性能较差。拆包战略也十分原始,难以满足业务复杂多变的拆包提升需求。
和 Turbopack 的区别
Rspack 和 turbopack 都是基于 Rust 成功的 bundler,且都施展了 Rust 言语的长处。
与 turbopack 不同的是,Rspack 选用了对 webpack 生态兼容的路途,一方面,这些兼容或许会带来必定的性能开支,但在实践的业务落地中,我们发现关于大局部的运行来说,这些性能开支是可以接受的,另一方面,这些兼容也使得 Rspack 可以更好地与下层的框架和生态启动集成,能够成功业务的渐进式迁徙。
和 Rollup 的区别
Rspack 和 Rollup 虽然都是打包工具,但是两者的并重畛域不同,Rollup 更适宜用于打包库,而 Rspack 适宜用于打包运行。因此 Rspack 对打包运前启动了很多提升,如 HMR、Bundle splitting 等性能,而 Rollup 则比 Rspack 的编译产物对库更为友好,如更好的 ESM 产物允许。 社区上也有很多的工具在 Rollup 基础上启动了必定的封装,提供了对运行打包更友好的允许,如 vite 和 wmr, 目前 Rspack 比 Rollup 有更好的消费环境构建性能。
和 Parcel 的区别
Rspack 的全体架构与 Parcel 有很多独特之处。例如都将 CSS 资源视为一等公民,都允许基于 filter 的 transformer。但是,Parcel 愈加器重开箱即用的体验,而 Rspack 愈加器重为下层框架提供灵敏的性能。Parcel 开创性地设计了 Unified Graph 和使 HTML 成为一等公民的特性。Rspack 也方案在未来允许这些特性。