@modern-js/main-doc 2.68.9 → 2.68.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/en/guides/advanced-features/page-performance/optimize-bundle.mdx +17 -3
- package/docs/en/guides/advanced-features/web-server.mdx +3 -1
- package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx +16 -2
- package/docs/zh/guides/advanced-features/web-server.mdx +4 -2
- package/package.json +2 -2
@@ -96,9 +96,23 @@ See details in [plugin-image-compress](https://github.com/rspack-contrib/rsbuild
|
|
96
96
|
|
97
97
|
## Split Chunk
|
98
98
|
|
99
|
-
A great
|
100
|
-
|
101
|
-
|
99
|
+
A great code splitting strategy is very important to improve the loading performance of the application. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of the application.
|
100
|
+
|
101
|
+
Modern.js provides the same [Code Splitting](https://rsbuild.rs/zh/guide/optimization/code-splitting) as Rsbuild. But there are some differences in the default strategy `split-by-experience`.
|
102
|
+
|
103
|
+
When the project installs `antd`, `@arco-design/web-react`, or `@douyinfe/semi-ui` packages, it will automatically add the corresponding group. The implementation reference is as follows:
|
104
|
+
|
105
|
+
```ts
|
106
|
+
if (isPackageInstalled('antd', rootPath)) {
|
107
|
+
groups.antd = ['antd'];
|
108
|
+
}
|
109
|
+
if (isPackageInstalled('@arco-design/web-react', rootPath)) {
|
110
|
+
groups.arco = [/@?arco-design/];
|
111
|
+
}
|
112
|
+
if (isPackageInstalled('@douyinfe/semi-ui', rootPath)) {
|
113
|
+
groups.semi = [/@(ies|douyinfe)[\\/]semi-.*/];
|
114
|
+
}
|
115
|
+
```
|
102
116
|
|
103
117
|
For example, split the `axios` library under node_modules into `axios.js`:
|
104
118
|
|
@@ -8,7 +8,7 @@ Modern.js encapsulates most server-side capabilities required by projects, typic
|
|
8
8
|
|
9
9
|
## Starting a Custom Web Server
|
10
10
|
|
11
|
-
:::
|
11
|
+
:::tip
|
12
12
|
You must ensure that the Modern.js version is x.67.5 or above.
|
13
13
|
:::
|
14
14
|
|
@@ -24,6 +24,8 @@ After executing the command, a `server/modern.server.ts` file will be automatica
|
|
24
24
|
|
25
25
|
## Capabilities of the Custom Web Server
|
26
26
|
|
27
|
+
Modern.js's Web Server is based on Hono, and in the latest version of the Custom Web Server, we expose Hono's middleware capabilities, you can refer to [Hono API](https://hono.dev/docs/api/context) for more usage.
|
28
|
+
|
27
29
|
In the `server/modern.server.ts` file, you can add the following configurations to extend the Server:
|
28
30
|
- **Middleware**
|
29
31
|
- **Render Middleware**
|
@@ -98,9 +98,23 @@ export default {
|
|
98
98
|
|
99
99
|
良好的拆包策略对于提升应用的加载性能是十分重要的,可以充分利用浏览器的缓存机制,减少请求数量,加快页面加载速度。
|
100
100
|
|
101
|
-
|
101
|
+
Modern.js 提供了与 Rsbuild 相同的[拆包策略](https://rsbuild.rs/zh/guide/optimization/code-splitting),但在默认策略 `split-by-experience` 上有些许差异。
|
102
|
+
|
103
|
+
当项目中安装了 `antd`、`@arco-design/web-react` 或 `@douyinfe/semi-ui` 包时,会自动添加对应的分组。具体实现参考:
|
104
|
+
|
105
|
+
```ts
|
106
|
+
if (isPackageInstalled('antd', rootPath)) {
|
107
|
+
groups.antd = ['antd'];
|
108
|
+
}
|
109
|
+
if (isPackageInstalled('@arco-design/web-react', rootPath)) {
|
110
|
+
groups.arco = [/@?arco-design/];
|
111
|
+
}
|
112
|
+
if (isPackageInstalled('@douyinfe/semi-ui', rootPath)) {
|
113
|
+
groups.semi = [/@(ies|douyinfe)[\\/]semi-.*/];
|
114
|
+
}
|
115
|
+
```
|
102
116
|
|
103
|
-
|
117
|
+
内置的策略可以满足大部分应用的需求,你也可以根据自己的业务场景,自定义拆包配置。比如将 node_modules 下的 `axios` 库拆分到 `axios.js` 中:
|
104
118
|
|
105
119
|
```js
|
106
120
|
export default {
|
@@ -6,9 +6,10 @@ sidebar_position: 16
|
|
6
6
|
|
7
7
|
Modern.js 将大部分项目需要的服务端能力都进行了封装,通常项目无需进行服务端开发。但在有些开发场景下,例如用户鉴权、请求预处理、添加页面渲染骨架等,项目仍需要对服务端进行定制。
|
8
8
|
|
9
|
+
|
9
10
|
## 开启自定义 Web Server
|
10
11
|
|
11
|
-
:::
|
12
|
+
:::tip
|
12
13
|
必须确保 Modern.js 版本是 x.67.5 及以上。
|
13
14
|
:::
|
14
15
|
|
@@ -24,6 +25,8 @@ Modern.js 将大部分项目需要的服务端能力都进行了封装,通常
|
|
24
25
|
|
25
26
|
## 自定义 Web Server 能力
|
26
27
|
|
28
|
+
Modern.js 的服务器基于 Hono 实现,在最新版本的自定义 Web Server 中,我们向用户暴露了 Hono 的中间件能力,你可以参考 [Hono 文档](https://hono.dev/docs/api/context) 了解更多用法。
|
29
|
+
|
27
30
|
`server/modern.server.ts` 文件中添加如下配置来扩展 Server:
|
28
31
|
- **中间件(Middleware)**
|
29
32
|
- **渲染中间件(RenderMiddleware)**
|
@@ -69,7 +72,6 @@ type ServerConfig = {
|
|
69
72
|
}
|
70
73
|
```
|
71
74
|
|
72
|
-
|
73
75
|
### Middleware
|
74
76
|
|
75
77
|
Middleware 支持在 Modern.js 服务的**请求处理**与**页面路由**的流程前后,执行自定义逻辑。
|
package/package.json
CHANGED
@@ -15,14 +15,14 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.68.
|
18
|
+
"version": "2.68.11",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public"
|
22
22
|
},
|
23
23
|
"dependencies": {
|
24
24
|
"mermaid": "^11.4.1",
|
25
|
-
"@modern-js/sandpack-react": "2.68.
|
25
|
+
"@modern-js/sandpack-react": "2.68.11"
|
26
26
|
},
|
27
27
|
"devDependencies": {
|
28
28
|
"@rsbuild/plugin-sass": "1.3.5",
|