Rspack learn to understand

1. Introduction

• Rspack GitHub repository , Rspack Quick start .

• Rspack is a high-performance build tool developed by the Byte ByteDance Web Infrateam based on the RustWeb language .

• Rust is an efficient, reliable, general-purpose high-level language. Its high efficiency is not limited to development efficiency, execution efficiency is also commendable, and it is one of the few languages ​​that takes both development efficiency and execution efficiency into account.

• RspackCurrently supports React, Vue, Svelte, Solid, NestJS, Angularpreliminary support, and many capabilities are missing, others include Storybook, Modern.js, Modern.js Docand so on.

2. Features

• advantage

  • Startup speed: Based on Rustthe implementation, the build speed is extremely fast.

  • HMR(Hot update): The built-in incremental compilation mechanism HMRis extremely fast and fully capable of developing large-scale projects.

  • Compatible webpackecology: webpackCompatible with the architecture and ecology of , no need to build the ecology from scratch.

  • Built-in common build capabilities: provide out-of-the-box support for TypeScript, JSX, CSS, CSS Modules, etc.Sass

  • Default production optimization: By default, various optimization strategies are built in, such as Tree Shaking, , 代码压缩and so on.

  • BuildPerformance: Achieved 5~10a 100% improvement in compilation performance.

  • …

• shortcoming

  • LoaderThe support is limited. PluginAt present, it mainly depends on the built-in. The use of advanced points is more troublesome or the support is limited. The configuration after the built-in is relatively simple.

  • It is more suitable for huge projects, so that the running speed and Buildspeed can be maintained at 1 times webpackthat of 5-10, and the improvement for small and medium projects is limited.

  • Only nodejs 14the above project migrations are supported.

  • …

3. Performance comparison

• Tool comparison

  

• Benefits after Byte Internal Project Migration

  

4. Architecture design

• Mainly around 4the aspect, with a structure diagram

  

  • The core architecture was born out ofWabpack5

    Because Wabpackit has been tested for many years, its overall structure stability is very high.

  • NativeLanguage- based high-concurrency framework

    RustIt is a language itself Native. Compared with JSthis dynamic language, it can be highly optimized and has a higher performance bottleneck. Although JSthe language V8is already good in some optimizations, its shortcoming comes from the support for multi-threading, and the benefits brought by implementing multi-threading are much lower Rust.

  • Based on Rustthe BabelsubstituteSWC

    WebpackMost of the ecology is based on Loaderand Pluginextensions. The main point is Loaderthat traditional tools are used Babel Loaderto do it, but Babel Loaderit is relatively slow, so Rustit is used SWCinstead. SWCCompared with Babelthe performance improvement brought by , it has made a relatively high contribution, so the use of Rspackcan be avoided during development.Babel Loader

  • Efficient communication based NAPI-RSon RustandJS

    核心用 Rust 写的，但是插件扩展是 JS写的，一方面有些开发者还得学习 Rust 才能做插件开发，上手成本比较高，另一方面是 JS 本身有个动态化特性，能直接在用户侧去编写并被加载执行，由于 Rust 是一门 Native 语言，做动态化是远不如 JS 的，即使使用 Rust 开发了一个插件，编译后的产物也是一个 Native Code，Native Code 跟 操作系统、CPU 等是强相关的，比如在 Windows 上编译出来的插件在 Mac 上是跑不起来的，如果想做这种 Native 插件的动态分发或加载是比较困难的，需要熟悉整套跨平台编程的知识，每一个插件可能需要编译出来很多个平台的产物，然后再分发到不同平台上去，这个门槛比较高且稳定性也不容易控制。

5. Migration Principles

• One principle is to give priority to the use of built-in capabilities, which can ensure optimal performance. For example, do not use Babel Loaderrelated capabilities. Commonly used capabilities are Babelbasically built-in. If you must use them, you need to control the impact to a small range. If you use them on a large scale, the possible Rspackperformance degradation will be more obvious.

• cssRelated, webpackit is generally used style-loader、css-loaderfor processing, but it is implemented Rspackusing and is enabled by default, so it is recommended to use the built-in capabilities instead of using these .SWCexperiments.csscssLoader

• The resource module recommends to use Asset Modulesfor processing, webpack5and also uses Asset Modulesto replace the previous file-loader、url-loader、raw-loaderetc.

• htmlThe generation is also a built-in Rustversion of the plug-in, but the function may be slightly weaker. If htmlyou have relatively high customization requirements at the level, you can use it @rspack/plugin-html. This is a JSversion, the performance will be Rustslower than the version, but the extension is higher.

QA

• ViteWhich is Rspackbetter?

  This depends on the scenario. ViteThe development experience and ecology of small and medium-sized scenarios are better. For example, with some SSRsupport, Rspackit is currently more suitable for heavy-duty applications (such as internal companies 庞大的B端应用), and can compile faster 5-10by 3 times.

• Is migration recommended at this stage Rspack?

  This depends on whether some advanced functions or plug-ins are used. It may not be supported at this stage. You need to check the support status. In other words, if there is no webpackdeep customization or manipulation of , it should not be a big problem and you can try it.