From 2dfa3017d09b918d5ae11f504f89ab594b945fb4 Mon Sep 17 00:00:00 2001 From: harpsealjs Date: Thu, 7 Nov 2024 15:13:02 +0800 Subject: [PATCH] docs: announcing v1.1 (#8332) Co-authored-by: Horu <73709188+HigherOrderLogic@users.noreply.github.com> Co-authored-by: ahabhgk Co-authored-by: GiveMe-A-Name Co-authored-by: gaoyuan.1226 Co-authored-by: neverland --- website/docs/en/blog/announcing-1-1.mdx | 200 +++++++++++++++++++++++ website/docs/en/blog/index.mdx | 6 + website/docs/zh/blog/announcing-1-1.mdx | 201 ++++++++++++++++++++++++ website/docs/zh/blog/index.mdx | 6 + website/project-words.txt | 2 + website/rspress.config.ts | 2 +- 6 files changed, 416 insertions(+), 1 deletion(-) create mode 100644 website/docs/en/blog/announcing-1-1.mdx create mode 100644 website/docs/zh/blog/announcing-1-1.mdx diff --git a/website/docs/en/blog/announcing-1-1.mdx b/website/docs/en/blog/announcing-1-1.mdx new file mode 100644 index 00000000000..844bf4d5204 --- /dev/null +++ b/website/docs/en/blog/announcing-1-1.mdx @@ -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. + +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: + +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. + +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. + +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. + +rsbuild-dev-server + +### 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). diff --git a/website/docs/en/blog/index.mdx b/website/docs/en/blog/index.mdx index 88d486d421c..dbe3ca5c9e7 100644 --- a/website/docs/en/blog/index.mdx +++ b/website/docs/en/blog/index.mdx @@ -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 diff --git a/website/docs/zh/blog/announcing-1-1.mdx b/website/docs/zh/blog/announcing-1-1.mdx new file mode 100644 index 00000000000..9d79690de07 --- /dev/null +++ b/website/docs/zh/blog/announcing-1-1.mdx @@ -0,0 +1,201 @@ +--- +date: 2024-11-07 16:00:00 +sidebar: false +--- + +# Rspack 1.1 发布公告 + +> 2024 年 11 月 07 日 + +![Rspack 1.1](https://assets.rspack.dev/rspack/rspack-banner-v1-1.png) + +> 由 [@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 和 Rsbuild v1.1 已经正式发布！ + +值得关注的变更如下： + +- 性能优化 + - [优化调度策略](#优化调度策略)：相较于 1.0 版本性能提升达 **10%**。 + - [新的增量构建](#新的增量构建)：实验性功能，开启后可使 HMR 性能提升高达 **38%**。 +- 新功能 + - [优化 HTML 插件](#优化-html-插件)：用新功能重构内置的 HTML 插件。 + - [优化 JSDoc](#优化-jsdoc)：为所有配置项添加了 JSDoc。 +- 生态系统 + - [Docusaurus 构建提速](#docusaurus-构建提速)：使用 Rspack 打包 Docusaurus 站点。 + - [Nuxt Rspack 构建器](#nuxt-rspack-构建器)：Nuxt 添加实验性的 Rspack 构建器。 +- [Rsbuild v1.1](#rsbuild-v11)：添加 CLI 快捷方式和新配置。 + +## 性能优化 + +### 优化调度策略 + +根据我们的性能测试，Rspack v1.1 相较于 v1.0 性能提升达**10%**。 + +Rspack v1.1 与 v1.0 的性能对比 + +优化主要源于 Rspack v1.1 采用了更佳的线程调度策略，其灵感来自于[《使用 Rust 语言的 Async Tokio 运行时处理 CPU 密集型任务》](https://thenewstack.io/using-rustlangs-async-tokio-runtime-for-cpu-bound-tasks/)，同时 SWC 也优化了其并发支持，从而能够更高效地调度异步任务。 + +### 新的增量构建 + +在 Rspack 0.x 的早期版本中，我们实现了[experiments.incrementalRebuild](https://v0.rspack.dev/config/experiments#experimentsincrementalrebuild)。随着这个功能逐渐稳定，我们移除了实验性配置并默认启用。 + +然而，此功能仅在重新构建时的 `make` 和 `emitAssets` 阶段做到了增量。许多项目在 `make` 阶段运行 loader 会花费大量时间。当时对于这些项目，此功能在重新构建时有相对明显的性能提升。但仍有一些项目在 `make` 之外的其他阶段花费大量时间。因此，我们对这个功能进行了优化和扩展，逐渐将增量引入到其他阶段，如 `buildChunkGraph`、`providedExports`、`moduleCodegen` 等。 + +在 Rspack v1.1 中，我们引入了 [experiments.incremental](/config/experiments#experimentsincremental) 作为 `experiments.incrementalRebuild` 的后继者和超集，旨在为开发者带来进一步的重新构建时的性能提升和更快的 HMR。 + +在一个有 10000 个 React 组件的案例中，HMR 速度提升了 **38%**： + +启用新增量的 10000 个 React 组件 + +在 Rspack v1.1 中，你可以在 `dev` 模式下通过以下方式启用此功能： + +```js title=rspack.config.js +const isDev = process.env.NODE_ENV === 'development'; + +module.exports = { + mode: isDev ? 'development' : 'production', + experiments: { + incremental: isDev, + }, +}; +``` + +> 更多详细信息请参考 [experiments.incremental](/config/experiments#experimentsincremental)。 + +目前这是一个实验性功能，还需更多的验证以保证其稳定。如果你感兴趣可以尝试一下，并将错误报告和反馈提交至[#8106](https://github.com/web-infra-dev/rspack/issues/8106)。 + +## 新功能 + +### 优化 HTML 插件 + +在早前的 Rspack 版本中已实现了内置的 `HtmlRspackPlugin`，但它的能力缺失严重，缺少了部分配置项的同时，也不支持 `hooks`。这使得那些基于 `HtmlWebpackPlugin` 的 `hooks` 实现的插件无法在 `HtmlRspackPlugin` 中得到兼容。 + +因此，我们大幅重构了 `HtmlRspackPlugin`，在对齐了更多 `HtmlWebpackPlugin` 配置项的同时，也完成了 `hooks` 对齐。现在你可以通过 `HtmlRspackPlugin.getCompilationHooks` 来获取它们，并使用其修改 HTML 产物的内容： + +```js +const AddAttributePlugin = { + apply: function (compiler) { + compiler.hooks.compilation.tap('AddAttributePlugin', compilation => { + HtmlRspackPlugin.getCompilationHooks( + compilation, + ).alterAssetTags.tapPromise('AddAttributePlugin', async data => { + data.assetTags.scripts = data.assetTags.scripts.map(tag => { + if (tag.tagName === 'script') { + tag.attributes.specialAttribute = true; + } + return tag; + }); + }); + }); + }, +}; + +module.exports = { + plugins: [new HtmlRspackPlugin(), AddAttributePlugin], +}; +``` + +> 更多详细信息请参考 [HtmlRspackPlugin](https://rspack.dev/plugins/rspack/html-rspack-plugin) + +### 优化 JSDoc + +Rspack 使用 [zod](https://github.com/colinhacks/zod) 验证用户配置并推断配置类型。然而推断出的类型缺少 JSDoc 注释，使得生成的类型相当复杂且难以理解。 + +为了解决这个问题，我们重构了配置的类型，并为所有类型都添加了 JSDoc 注释以提高可读性。 + +IDE 中的配置智能感知 + +> 我们仍在寻求改进 JSDoc。如果你感兴趣，请随时提交 PR。❤️ + +## 生态系统 + +### Docusaurus 构建提速 + +[Docusaurus v3.6](https://docusaurus.io/blog/docusaurus-v3.6) 带来了`Docusaurus Faster` 选项，允许用户将 Rspack 用作 Docusaurus 站点的打包工具。 + +[Docusaurus Faster](https://docusaurus.io/blog/releases/3.6#docusaurus-faster) 的目标是减少 Docusaurus 的构建耗时和内存占用。Docusaurus 团队致力于多项优化，并使用像 Rspack 和 SWC 这样基于 Rust 的高性能工具对其基础设施进行了现代化改造。 + +在对其社区站点的性能测试中，生产模式下的站点的构建速度可以提速 2 到 4 倍。 + +### Nuxt Rspack 构建器 + +[Nuxt v3.14](https://nuxt.com/blog/v3-14) 将 Rspack 作为 Nuxt 官方支持的构建器。 + +它仍然处于实验阶段，Nuxt 团队重构了内部的虚拟文件系统来支持 `unplugin` 以使得它成功运行。 + +你可以尝试 [nuxt-rspack-starter](https://github.com/danielroe/nuxt-rspack-starter) 作为初始项目，或者安装 [@nuxt/rspack-builder](https://www.npmjs.com/package/@nuxt/rspack-builder) 并在 Nuxt 配置文件中设置 `builder: 'rspack'`。 + +## Rsbuild v1.1 + +Rsbuild v1.1 在升级到 Rspack v1.1 的同时引入了几个新功能。 + +### CLI 快捷方式 + +Rsbuild 现在可通过 [dev.cliShortcuts](https://rsbuild.dev/config/dev/cli-shortcuts) 启用 CLI 快捷方式。如果你已在使用 Rsbuild CLI，则该功能默认开启。 + +CLI 快捷方式允许你清空控制台、打开浏览器、重启服务器或自定义任何你想要的快捷键。 + +Rsbuild CLI 快捷方式 + +### 查看静态资源 + +Rsbuild 开发服务器现在会在 `/rsbuild-dev-server` 路径下提供了一个报告页面，允许你查看当前构建期间生成的所有静态资源。 + +rsbuild-dev-server + +### 新配置 + +Rsbuild 1.1 引入了一些新配置： + +- [server.base](https://rsbuild.dev/config/server/base)：设置服务器的基础路径。 +- [source.assetsInclude](https://rsbuild.dev/config/source/assets-include)：设置额外被作为静态资源处理的文件。 +- [output.filename.assets](https://rsbuild.dev/config/output/filename)：设置额外静态资源的名称。 +- [output.distPath.assets](https://rsbuild.dev/config/output/dist-path)：设置额外静态资源的输出目录。 + +## 升级指南 + +### 升级 SWC 插件 + +在 Rspack v1.1 中，Rust 包中 `swc_core` 已升级到 `5.0.1`。SWC Wasm 插件的用户需要确保与正在使用的 `swc_core` 版本一致，否则可能会导致意外问题。 + +更多详细信息请参阅 [SWC 文档](https://swc.rs/docs/plugin/selecting-swc-core)。 + +### 哈希函数 + +Rspack 的 [output.hashFunction](/config/output#outputhashfunction) 现在默认为更快的 `xxhash64`，并且 [output.hashDigestLength](/config/output#outputhashdigestlength) 现在默认为 `16`（之前为 `20` ）。对于大型项目，此更改将带来显著的性能提升。 + +如果你倾向于使用之前的哈希函数，可以设置： + +```js title="rspack.config.js" +module.exports = { + output: { + hashFunction: 'md5', + hashDigestLength: 20, + }, +}; +``` + +> 相关 PR：[#8249](https://github.com/web-infra-dev/rspack/pull/8249)。 diff --git a/website/docs/zh/blog/index.mdx b/website/docs/zh/blog/index.mdx index 0a69b83b8f2..742227495cd 100644 --- a/website/docs/zh/blog/index.mdx +++ b/website/docs/zh/blog/index.mdx @@ -7,6 +7,12 @@ sidebar: false 在此查看有关 Rspack 的最新文章和发布公告。 +## [Rspack 1.1 发布公告](/blog/announcing-1-1) + +> 2024 年 11 月 7 日 + +Rspack 和 Rsbuild 1.1 版本发布，显著提升了冷启动和增量构建的性能，同时改进了内置的 HTML 插件和配置选项的类型提示。 + ## [Rspack 1.0 发布公告](/blog/announcing-1-0) > 2024 年 8 月 28 日 diff --git a/website/project-words.txt b/website/project-words.txt index 3da1df5389f..e7e3784bbf3 100644 --- a/website/project-words.txt +++ b/website/project-words.txt @@ -59,6 +59,7 @@ idents Idents iife Iife +incrementality indicatif inituit innovatively @@ -69,6 +70,7 @@ JavaScript jerrykingxyz jkzing jscexperimentalplugins +jserfeng JSCPU jscpuprofile kaffi diff --git a/website/rspress.config.ts b/website/rspress.config.ts index dbe38783bdf..ddd6b58c189 100644 --- a/website/rspress.config.ts +++ b/website/rspress.config.ts @@ -121,7 +121,7 @@ export default defineConfig({ type: 'website', url: PUBLISH_URL, image: - 'https://assets.rspack.dev/rspack/assets/rspack-og-image-v1-0.png', + 'https://assets.rspack.dev/rspack/assets/rspack-og-image-v1-1.png', description: 'Fast Rust-based Web Bundler', twitter: { site: '@rspack_dev',