字节的 Rspack 会成为前端构建工具的未来吗🥰🥰🥰

站长

2023年03月11日 11:04 · 阅读数 15

由于本人最近沉迷于阅读 React 源码,对外界信息并没有怎么关注,在今天早上玩手机的时候,突然看到群群友发了一条推文,内容信息就是我们这篇文章要讲的内容,内容的标题是 "字节跳动自研 Web 构建工具 Rspack 正式发布",怀着好奇的心的便尝试了一下,发现用着还不错,希望在后面能发展得更好吧!

因为我自己写有一个自己的脚手架,但是使用的构建工具是 Webpack,看到了简介中的 rust,听说这将是前端的未来,像我这个老传统就只能用旧的技术了,所以我今天打破常规,来试试 Rspack 这个构建工具。

RsPack

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

Rspack 使用 Rust 语言编写,得益于 Rust 的高性能编译器支持,Rust 编译生成的 Native Code通常比 JavaScript 性能更为高效。

根据官方文档介绍,它的优点,主要有以下几个方面:

快熟的 Dev 启动性能;
高效的 Build 性能;
灵活的配置;
生产环境的优化能力;

根据官网首页提供的6个特点,请看下图:

字节的 Rspack 会成为前端构建工具的未来吗🥰🥰🥰

Rspack使用

废话不多说,赶紧上车。

首先我们创建一个空文件并打开终端或者打开 vscode 也行,我用的是 pnpm,具体你们喜欢啥用啥,首先创建 package,json,并在本地安装 @rspack/cli,具体操作如下:

 pnpm init 
 pnpm add @rspack/cli -D

Rspack 默认通过 rspack.config.js 来配置打包行为，我们可以在项目根目录下创建一个 rspack.config.js 文件,到这里,我们项目的初始化也算完成了,接下来开始配置。

配置入口

要想项目能启动起来,首先我们要有一个项目入口文件,配置如下:

// rspack.config.js

const path = require("path");

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

配置完成后并在根目录下创建一个入口文件 src/index.jsx,并在该文件下编写以下代码:

import * as ReactDOM from "react-dom/client";

const App = () => {
  return <div>hello Rspack</div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

要想正常使用 React,我们需要安装 react 作为依赖:

pnpm add react react-dom --save

添加 html 支持

Rspack 内置了对 html 的支持,无需自己手动的在 html 里配置产物 js 的地址,通过如下方式使用 html 功能:

// rspack.config.js

module.exports = {
  // ...
  builtins: {
    html: [
      {
        template: "./public/index.html",
        title: "moment",// d懂的都懂
        inject: "head",// js文件引入存放的位置
      },
    ],
  },
};

Rspack 配置好了,我们要在根目录上创建一个 html 文件 public/index.html,并编写以下代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

devServer

因为 Rspack 中的 devServer 配置可以和 webpack 中的无缝衔接,这里我就直接拷贝我之前写好的了嘻嘻嘻嘻,配置代码如下:

// rspack.config.js

module.exports = {
  // ...
  devServer: {
    hot: true,
    compress: true, // 是否启用 gzip 压缩
    historyApiFallback: true, // 解决前端路由刷新404现象
    client: {
      logging: "info",
      overlay: false,
    },
    open: true,
  },
};

配置 package.json 文件

到现在为止,整个 React 项目的基本已经配置完成了,已经可以运行,这个时候我们只需配置一下项目的启动方式即可,在 package.json 文件中添加如下配置:

  "scripts": {
    "build": "npx rspack build",
    "start": "npx rspack serve"
  },

怕有些基础不太好的同学跟丢了,我在这里添加 rspack.config.js 配置的完整代码,具体如下:

const path = require("path");

module.exports = {
  entry: {
    main: "./src/index.jsx",
  },
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    hot: true,
    compress: true, // 是否启用 gzip 压缩
    historyApiFallback: true, // 解决前端路由刷新404现象
    client: {
      logging: "info",
      overlay: false,
    },
    open: true,
  },
  builtins: {
    html: [
      {
        template: "./public/index.html",
        title: "moment", // d懂的都懂
        inject: "head", // js文件存放的位置
      },
    ],
  },
};

当我们在终端里输入 pnpm start 时,项目就为我们自动运行起来了,并为我们自动打开了浏览器

字节的 Rspack 会成为前端构建工具的未来吗🥰🥰🥰

不得不说,这 ui 配色还挺好看的,浏览器这时候也正常显示了

字节的 Rspack 会成为前端构建工具的未来吗🥰🥰🥰

有用过 webpack 的同学可能就好奇了,就这么简单就把项目启动起来了?

没错,Rspack 给我们内置了很多配置项,例如它默认给我们开启了模块热替换功能,并且默认支持 jsx,省去了我们配置 babel 的时间了。

路径别名

配置路径别名和 webpack 的配置一模一样,具体配置请看代码:

// rspack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src/pages"),
    },
  },
};

在 src\pages\home\index.jsx 创建一个页面,具体代码如下配置:

import React from "react";

const Home = () => {
  return <div>Home</div>;
};

export default Home;

并在项目的入口文件中通过路径别名引入 import Home from "@/home";,效果正常显示在页面上了:

字节的 Rspack 会成为前端构建工具的未来吗🥰🥰🥰

区分生产环境和开发环境

你可以通过 process.env.NODE_ENV 来获取环境变量,当你执行 pnpm start 返回的值是 "development",而通过 pnpm build 执行的返回的结果是 "production",在这里我们可以这样这样区分环境变量:

// rspack.config.js

const path = require("path");
const isProduction = process.env.NODE_ENV === "production";

module.exports = {
  mode: process.env.NODE_ENV,
};

devtool

该配置同于控制 Source Map 的生成行为,来方便我们对项目进行调试,具体配置如下:

// rspack.config.js
module.exports = {
  // ...
  devtool: !isProduction ? "source-map" : false,
};

以上配置就是当在生成环境下 devtool 设置成 "source-map",否则为 false,当项目出错了,可以立刻定位到具体位置:

字节的 Rspack 会成为前端构建工具的未来吗🥰🥰🥰

支持sass的支持

由于 Rspack 已经完成了对 sass-loader 的兼容,你可以直接这样配置:

// rspack.config.js
module.exports = {
  // ...
    module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: "sass-loader",
            options: {
              // ...
            },
          },
        ],
        type: "css",
      },
    ],
  },
};

紧接着编写 style.scss 文件,直接着在项目里面引入,代码如下:

import React from "react";

import style from "./style.scss";

const Home = () => {
  return <div className={style}>Home</div>;
};

export default Home;

你会看到浏览器显示正常

字节的 Rspack 会成为前端构建工具的未来吗🥰🥰🥰

好了,最近比较忙,没什么空看额外的文档,本篇文章的讲解就到这里吧。

参考

Rspack官网

一些想法

文章写到这里的时候,本平台上讲 Rspack 的相关文章已经有两篇了,而讲解 Rspack + React 文章的为第一篇,这速度够快吧。

正好我自己的脚手架的功能还比较单薄,过段时间忙完春招会添加对 Rspack 的支持,本人对 Rspack 接触的那么点时间也是感觉到挺不错的感觉。

最后再给我的脚手架打一下广告,目前只有我一个人开发能力优先,寻求伙伴中我开源了一个好玩且好用的前端脚手架