卧槽！字节竟然开源了Rspack，要干掉Webpack?

大家好，我是「前端实验室」爱分享的了不起~

最近字节开源了一款基于 Rust 的构建引擎,他们称在 Webpack 上尝试了多种方法来优化应用，但是效果甚微。于是决定从零开发,用了将近一年的时间，完成了一个新的构建工具——Rspack

今天我们就来看看对比其他构建工具，Rspack 又有什么优势？

Rspack

Rspack是一个基于 Rust 的高性能构建引擎， 具备与 Webpack 生态系统的互操作性，可以被 Webpack 项目低成本集成，并提供更好的构建性能。

特点

1. 启动速度快: 基于 Rust 实现，构建速度极快，带给你极致的开发体验。
2. 闪电般的 HMR: 内置增量编译机制，HMR 速度极快，完全胜任大型项目的开发。
3. 兼容 webpack 生态: 针对 webpack 的架构和生态进行兼容，无需从头搭建生态。
4. 内置常见构建能力: 对 TypeScript、JSX、CSS、CSS Modules、Sass 等提供开箱即用的支持。
5. 默认生产优化: 默认内置多种优化策略，如 Tree Shaking、代码压缩等等。6.高效的 Build 性能： 取得了 5~10 倍编译性能的提升

兼容和支持

Loader 兼容

Plugin 兼容

从这两个表里可以看到，目前 Rspack 已经完成了 Webpack Loader 架构的支持，并且适配了 Webpack 的 loader 架构, 几乎可以无缝切换到 Webpack 中经常使用的各种loader。

安装

使用 Rspack CLI

可以直接使用 Rspack CLI 来创建一个基础项目

npm create rspack@latest

然后按照提示操作即可

手动安装

mkdir rspack-demo
cd rspack-demo
npm init -y
npm install -D @rspack/cli

然后进行配置文件

Rspack 默认通过 rspack.config.js 来配置打包行为，我们可以在项目根目录下创建一个 rspack.config.js 文件，然后在里面配置打包行为，如下:

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

打包

npx rspack build

构建速度

Rspack 可以给项目带来 5 ～ 10 倍的编译效率提升，并且随着添加更多的优化手段，性能还在逐步的提升中。

冷启动（dev）

热更新

从启动速度和热更新速度来说，Rspack确实要比Webpack更快；但是更重要的还是其生态环境与对其他语言的支持程度，到底是KPI 的产物，还是真正能够被广泛运用起来呢!大家拭目以待吧

官网链接：https://www.rspack.dev/zh/