Skip to content

Commit

Permalink
docs: announcing v1.1 (#8332)
Browse files Browse the repository at this point in the history 
Co-authored-by: Horu <73709188+HigherOrderLogic@users.noreply.github.com>
Co-authored-by: ahabhgk <ahabhgk@gmail.com>
Co-authored-by: GiveMe-A-Name <a455300764b@hotmail.com>
Co-authored-by: gaoyuan.1226 <gaoyuan.1226@bytedance.com>
Co-authored-by: neverland <chenjiahan.jait@bytedance.com>
  • Loading branch information
@LingyuCoder @HigherOrderLogic
@ahabhgk @GiveMe-A-Name @9aoy @chenjiahan
6 people authored Nov 7, 2024
1 parent 8cf67de commit 2dfa301
Show file tree
Hide file tree
Showing 6 changed files with 416 additions and 1 deletion.
200 changes: 200 additions & 0 deletions website/docs/en/blog/announcing-1-1.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
---
date: 2024-11-07 16:00:00
sidebar: false
---

# Announcing Rspack 1.1

> November 7, 2024
![Rspack 1.1](https://assets.rspack.dev/rspack/rspack-banner-v1-1.png)

> Posted by [@LingyuCoder](https://github.com/LingyuCoder), [@ahabhgk](https://github.com/ahabhgk), [@GiveMe-A-Name](https://github.com/GiveMe-A-Name), [@9aoy](https://github.com/9aoy), [@chenjiahan](https://github.com/chenjiahan)
---

Rspack v1.1 and Rsbuild v1.1 are out!

Notable changes:

- Performance improvements
- [Better scheduling strategy](#better-scheduling-strategy): Make Rspack **10% faster** than v1.0.
- [New incremental rebuild](#new-incremental-rebuild): Experimental feature that makes HMR **up to 38% faster**.
- New features
- [Improved HTML Plugin](#improved-html-plugin): Refactored the built-in HTML plugin with new features.
- [Improved JSDoc](#improved-jsdoc): Added JSDoc for all configuration options.
- Ecosystem
- [Docusaurus Faster](#docusaurus-faster): Use Rspack as the bundler for Docusaurus sites.
- [Nuxt Rspack Builder](#nuxt-rspack-builder): Experimental Rspack builder for Nuxt.
- [Rsbuild v1.1](#rsbuild-v11): CLI shortcuts and new configurations.

## Performance improvements

### Better scheduling strategy

According to our benchmarks, Rspack v1.1 is **10% faster** than v1.0.

<img
width="850"
src="https://assets.rspack.dev/rspack/assets/rspack-1-1-perf-comparison.png"
alt="Rspack v1.1 vs v1.0"
/>

A major optimization is that Rspack uses a better scheduling strategy inspired by [Using Rustlang’s Async Tokio Runtime for CPU-Bound Tasks](https://thenewstack.io/using-rustlangs-async-tokio-runtime-for-cpu-bound-tasks/) and SWC optimization for better concurrency support, which allows better scheduling of async tasks.

### New incremental rebuild

In the early versions of Rspack 0.x, we implemented [experiments.incrementalRebuild](https://v0.rspack.dev/config/experiments#experimentsincrementalrebuild). As this feature gradually stabilized, we removed the experiments configuration and enabled it by default.

However, this feature only enabled incrementality for the `make` and `emitAssets` stages of the rebuild. For many projects, the loader in the `make` stage takes a lot of time. At that time, this feature had a relatively obvious performance improvement in rebuild for these projects. But there are still some projects that take a lot of time in stages other than `make`. Therefore, we optimized and expanded this feature and gradually introduced this feature into other stages, such as `buildChunkGraph`, `providedExports`, `moduleCodegen`, etc.

In Rspack v1.1, we introduced [experiments.incremental](/config/experiments#experimentsincremental) as the successor and superset of `experiments.incrementalRebuild`, aiming to bring further rebuild performance improvement and faster HMR to developers.

In a case of 10000 React components, the HMR becomes 38% faster:

<img
width="850"
src="https://assets.rspack.dev/rspack/assets/rspack-v1-1-new-incremental-compare.png"
alt="10000 React Components with new incremental enabled"
/>

In Rspack v1.1 you can enable this feature in development mode by:

```js title=rspack.config.js
const isDev = process.env.NODE_ENV === 'development';

module.exports = {
mode: isDev ? 'development' : 'production',
experiments: {
incremental: isDev,
},
};
```

> See [experiments.incremental](/config/experiments#experimentsincremental) for more details.
This is still an experimental feature and we need more work to stabilize it. If you are interested, give it a try and send bug reports and feedback to [#8106](https://github.com/web-infra-dev/rspack/issues/8106).

## New features

### Improved HTML Plugin

In earlier versions of Rspack, the built-in [HtmlRspackPlugin](/plugins/rspack/html-rspack-plugin) was implemented. However, its capabilities were severely lacking. It lacked some configuration options and did not support `hooks`, which made those plugins implemented based on the `hooks` of `HtmlWebpackPlugin` incompatible with Rspack.

Therefore, we refactored `HtmlRspackPlugin`. While supporting most of the configuration options of `HtmlWebpackPlugin`, we also completed the alignment of `hooks`. Now you can get these hooks through `HtmlRspackPlugin.getCompilationHooks` and use them to modify the content of the HTML assets like below:

```js title="rspack.config.js"
const DeferPlugin = {
apply(compiler) {
compiler.hooks.compilation.tap('DeferPlugin', compilation => {
const hooks = HtmlRspackPlugin.getCompilationHooks(compilation);
hooks.alterAssetTags.tapPromise('DeferPlugin', async data => {
// Add `defer` attribute to all script tags
for (const tag of data.assetTags.scripts) {
if (tag.tagName === 'script') {
tag.attributes.defer = true;
}
}
});
});
},
};

module.exports = {
plugins: [new HtmlRspackPlugin(), DeferPlugin],
};
```

> See [HtmlRspackPlugin](/plugins/rspack/html-rspack-plugin) for more details.
### Improved JSDoc

Rspack uses [zod](https://github.com/colinhacks/zod) to validate user configurations and infer all configuration types. However, the inferred types lack JSDoc comments and the generated types are quite complex and hard to understand.

To fix this, we recently refactored the configuration types and added JSDoc comments for all of them to improve readability.

<img
width="850"
src="https://assets.rspack.dev/rspack/assets/rspack-v1-1-config-intellisense.png"
alt="configuration intellisense in IDE"
/>

> We're still looking to improve the JSDoc. If you're interested, feel free to submit pull requests. ❤️
## Ecosystem

### Docusaurus Faster

[Docusaurus v3.6](https://docusaurus.io/blog/releases/3.6) brings the `Docusaurus Faster` options that allow users to use Rspack as the bundler for Docusaurus sites.

The [Docusaurus Faster](https://docusaurus.io/blog/releases/3.6#docusaurus-faster) project's goal is to reduce the build times and memory consumption of Docusaurus. Docusaurus team have worked on multiple optimizations and modernized their infrastructure to use faster Rust-based tools like Rspack and SWC.

Benchmarks on community site show that the production site can build 2 to 4 times faster.

### Nuxt Rspack builder

[Nuxt v3.14](https://nuxt.com/blog/v3-14) brings a new first-class Nuxt builder for Rspack.

It's still experimental and Nuxt team refactored the internal Nuxt virtual file system to use `unplugin` to make this possible.

You can try [nuxt-rspack-starter](https://github.com/danielroe/nuxt-rspack-starter) to get started, or install [@nuxt/rspack-builder](https://www.npmjs.com/package/@nuxt/rspack-builder) and set `builder: 'rspack'` in the Nuxt config file.

## Rsbuild v1.1

Rsbuild v1.1 upgraded to Rspack v1.1 and introduced several new features.

### CLI shortcuts

Rsbuild now supports enabling CLI shortcuts through the [dev.cliShortcuts](https://rsbuild.dev/config/dev/cli-shortcuts) config. If you are using Rsbuild CLI, it is enabled by default.

The CLI shortcut allows you to clear the console, open the browser, restart the server, or customize any shortcut you want.

<img
width="650"
src="https://assets.rspack.dev/rsbuild/assets/rsbuild-cli-shortcuts.png"
alt="Rsbuild CLI shortcuts"
/>

### View Static Assets

Rsbuild dev server now provides a report page at `/rsbuild-dev-server` that allows you to view all static assets generated during the current build.

<img
src="https://assets.rspack.dev/rsbuild/assets/assets-report-page.png"
alt="rsbuild-dev-server"
width="600"
/>

### New configurations

Rsbuild 1.1 introduced some new configurations:

- [server.base](https://rsbuild.dev/config/server/base): Set the base path of the server.
- [source.assetsInclude](https://rsbuild.dev/config/source/assets-include): Set the additional files that should be treated as static assets.
- [output.filename.assets](https://rsbuild.dev/config/output/filename): Set the name of other static assets.
- [output.distPath.assets](https://rsbuild.dev/config/output/dist-path): Set the output directory of other static assets.

## Upgrade guide

### Upgrade SWC plugins

In Rspack v1.1, the Rust crate `swc_core` has been upgraded to `5.0.1`. Users of the SWC Wasm plugin need to ensure version consistency with `swc_core` being used, otherwise, it may lead to unforeseen issues.

For more details, see [SWC documentation](https://swc.rs/docs/plugin/selecting-swc-core).

### Hash function

Rspack's [output.hashFunction](/config/output#outputhashfunction) now defaults to the faster `xxhash64`, and the [output.hashDigestLength](/config/output#outputhashdigestlength) now defaults to `16` (prev `20`). This change will bring a significant performance improvement for large projects.

If you prefer the previous hash function, you can set:

```js title="rspack.config.js"
module.exports = {
output: {
hashFunction: 'md5',
hashDigestLength: 20,
},
};
```

> Related PR: [#8249](https://github.com/web-infra-dev/rspack/pull/8249).
6 changes: 6 additions & 0 deletions website/docs/en/blog/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ sidebar: false

Check here for the latest articles and release announcements about Rspack.

## [Announcing Rspack 1.1](/blog/announcing-1-1)

> November 7, 2024
Rspack and Rsbuild 1.1 has been released, significantly improve the performance of cold starts and incremental builds. It also improve the built-in HTML plugin and types of configuration options.

## [Announcing Rspack 1.0](/blog/announcing-1-0)

> August 28, 2024
Expand Down
Loading

0 comments on commit 2dfa301

Please sign in to comment.