Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 25 additions & 4 deletions website/docs/en/config/dev/lazy-compilation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ type LazyCompilationOptions =
* Tells the client the server URL that needs to be requested.
*/
serverUrl?: string;
/**
* Customize the prefix used for lazy compilation endpoint.
* @default "/lazy-compilation-using-"
*/
prefix?: string;
};
```

Expand Down Expand Up @@ -54,6 +59,10 @@ Lazy compilation is only effective for dev builds and does not affect production

### Enable lazy compilation

By default, Rsbuild already enables `imports` option, which means lazy compilation of dynamic imported modules.

To enable full lazy compilation functionality, set `lazyCompilation` option to `true`:

```ts title="rsbuild.config.ts"
export default {
dev: {
Expand All @@ -76,6 +85,18 @@ export default {
};
```

### Disable lazy compilation

To disable lazy compilation, set `lazyCompilation` to `false`:

```ts title="rsbuild.config.ts"
export default {
dev: {
lazyCompilation: false,
},
};
```

### Entry modules

Use `lazyCompilation.entries` to control whether to lazily compile entry modules:
Expand Down Expand Up @@ -133,7 +154,7 @@ Rsbuild will replace the `<port>` placeholder with the actual port number the se

## Version history

| Version | Changes |
| ------- | --------------------------------------------------- |
| v1.3.0 | Added this option |
| v1.5.0 | Changed default value from `false` to current value |
| Version | Changes |
| ------- | ------------------------------------------------------------------------- |
| v1.3.0 | Added this option |
| v1.5.0 | Changed default value from `false` to `{ imports: true, entries: false }` |
35 changes: 28 additions & 7 deletions website/docs/zh/config/dev/lazy-compilation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ type LazyCompilationOptions =
* 指定 client 需要请求的 server URL
*/
serverUrl?: string;
/**
* 自定义 lazy compilation URL 的前缀
* @default "/lazy-compilation-using-"
*/
prefix?: string;
};
```

Expand Down Expand Up @@ -54,6 +59,10 @@ Lazy compilation 仅在开发阶段有效,对于生产构建不会产生影响

### 启用 Lazy compilation

Rsbuild 已经默认开启了 `imports` 选项,即 lazy 编译动态引入的模块。

将 `lazyCompilation` 设置为 `true` 即可开启完整的 lazy compilation 功能:

```ts title="rsbuild.config.ts"
export default {
dev: {
Expand All @@ -76,9 +85,21 @@ export default {
};
```

### 禁用 Lazy compilation

将 `lazyCompilation` 设置为 `false` 来禁用 lazy compilation:

```ts title="rsbuild.config.ts"
export default {
dev: {
lazyCompilation: false,
},
};
```

### 入口模块

通过 `lazyCompilation.entries` 来控制是否 lazy 编译入口模块
通过 `lazyCompilation.entries` 来控制是否延迟编译入口模块

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -92,14 +113,14 @@ export default {

在启用 `entries` 选项后,当你启动 dev server 时,Rsbuild 不会编译所有的页面,而是仅在访问特定的页面时,才对该页面进行编译。

lazy 编译入口模块时,有以下注意事项:
延迟编译入口模块时,有以下注意事项:

- 只适用于多页应用(MPA),对单页应用(SPA)没有优化效果。
- 当你访问一个页面时,你需要等待页面编译完成才能看到页面的内容。

### 异步模块

通过 `lazyCompilation.imports` 来控制是否 lazy 编译 [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) 引入的异步模块:
通过 `lazyCompilation.imports` 来控制是否延迟编译 [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) 引入的异步模块:

```ts title="rsbuild.config.ts"
export default {
Expand Down Expand Up @@ -133,7 +154,7 @@ Rsbuild 会自动将 `<port>` 占位符替换为 server 实际监听的端口号

## 版本历史

| 版本 | 变更内容 |
| ------ | --------------------------- |
| v1.3.0 | 新增该选项 |
| v1.5.0 | 默认值由 `false` 改为当前值 |
| 版本 | 变更内容 |
| ------ | --------------------------------------------------------- |
| v1.3.0 | 新增该选项 |
| v1.5.0 | 默认值由 `false` 改为 `{ imports: true, entries: false }` |
Loading