@modern-js/main-doc 2.18.1 → 2.19.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +6 -0
- package/docs/en/configure/app/tools/esbuild.mdx +2 -3
- package/docs/en/configure/app/tools/swc.mdx +2 -2
- package/docs/en/guides/get-started/glossary.mdx +63 -0
- package/docs/zh/configure/app/tools/esbuild.mdx +2 -2
- package/docs/zh/configure/app/tools/swc.mdx +2 -2
- package/docs/zh/guides/get-started/glossary.mdx +63 -0
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
@@ -9,9 +9,9 @@ sidebar_label: esbuild
|
|
9
9
|
|
10
10
|
## Introduction
|
11
11
|
|
12
|
-
|
12
|
+
import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
|
13
13
|
|
14
|
-
|
14
|
+
<Esbuild />
|
15
15
|
|
16
16
|
:::tip Recommend using SWC
|
17
17
|
We recommend using SWC to transform and minify code rather than esbuild, because SWC supports more syntaxes, provides better code compression, and the compiled code has better compatibility.
|
@@ -20,7 +20,6 @@ Therefore, we recommend that you use SWC instead of esbuild, please refer to [to
|
|
20
20
|
|
21
21
|
:::
|
22
22
|
|
23
|
-
|
24
23
|
## Configuration
|
25
24
|
|
26
25
|
You can set the esbuild compilation behavior through the `tools.esbuild` config.
|
@@ -9,9 +9,9 @@ sidebar_label: swc
|
|
9
9
|
|
10
10
|
## Introduction
|
11
11
|
|
12
|
-
|
12
|
+
import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
|
13
13
|
|
14
|
-
|
14
|
+
<SWC />
|
15
15
|
|
16
16
|
:::tip
|
17
17
|
When using Rspack as the bundler, SWC will be used for transpiling and compression by default, so you don't need to install or configure the SWC plugin.
|
@@ -0,0 +1,63 @@
|
|
1
|
+
---
|
2
|
+
sidebar_position: 4
|
3
|
+
---
|
4
|
+
|
5
|
+
# Glossary
|
6
|
+
|
7
|
+
## BFF
|
8
|
+
|
9
|
+
BFF stands for "Backend For Frontend". It is an architectural pattern where a dedicated backend service is created for frontend applications.
|
10
|
+
|
11
|
+
The BFF service acts as an intermediary between the frontend application and the backend APIs, providing a tailored API for the frontend to consume. This allows the frontend developers to have more control over the data and functionality that they need, without having to rely on a monolithic backend API to provide coresponding capabilities.
|
12
|
+
|
13
|
+
## Bundler
|
14
|
+
|
15
|
+
import Bundler from '@modern-js/builder-doc/docs/en/shared/bundler.md';
|
16
|
+
|
17
|
+
<Bundler />
|
18
|
+
|
19
|
+
## Builder
|
20
|
+
|
21
|
+
import Builder from '@modern-js/builder-doc/docs/en/shared/builder.md';
|
22
|
+
|
23
|
+
<Builder />
|
24
|
+
|
25
|
+
## CSR
|
26
|
+
|
27
|
+
CSR stands for "Client-Side Rendering". It means that pages are rendered directly in the browser using JavaScript. All the logic, data fetching, templating and routing is done on the client rather than the server.
|
28
|
+
|
29
|
+
In CSR, the server sends an empty HTML shell to the client along with some JavaScript bundles, which then fetches data from the server's APIs and populates the page with dynamic content.
|
30
|
+
|
31
|
+
## Garfish
|
32
|
+
|
33
|
+
[Garfish](https://garfish.bytedance.net/) is a set of micro front-end solutions mainly used to solve problems such as cross-team collaboration and technical system diversification of web applications.
|
34
|
+
|
35
|
+
Starting from the architectural level, it integrates several independently delivered front-end applications. These front-end applications can be developed, tested and deployed independently, but from the user's point of view they are still a cohesive single product.
|
36
|
+
|
37
|
+
## Rspack
|
38
|
+
|
39
|
+
import Rspack from '@modern-js/builder-doc/docs/en/shared/rspack.md';
|
40
|
+
|
41
|
+
<Rspack />
|
42
|
+
|
43
|
+
## SSR
|
44
|
+
|
45
|
+
SSR stands for "Server-Side Rendering". It is a technique where the server generates the HTML of a web page and sends it to the client, instead of sending just an empty HTML shell and relying on JavaScript to populate the page.
|
46
|
+
|
47
|
+
In traditional client-side rendering, the server sends an empty HTML shell to the client along with some JavaScript bundles, which then fetches data from the server's APIs and populates the page with dynamic content. This can result in a slower initial load time, which can be detrimental to user experience and SEO.
|
48
|
+
|
49
|
+
With SSR, the server generates the HTML with the dynamic content already populated, and sends it to the client. This can result in a faster initial load time and better SEO, as search engines can crawl the fully rendered page.
|
50
|
+
|
51
|
+
## SSG
|
52
|
+
|
53
|
+
SSG stands for "Static Site Generation". It is a technique where a web page is pre-rendered into static HTML, and then served directly to the client without the need for a server to generate the HTML on the fly.
|
54
|
+
|
55
|
+
In traditional SSR, the server generates the HTML on the fly each time a user requests a page. With SSG, the HTML is generated ahead of time during the build process and can be served directly from a CDN or other static hosting service.
|
56
|
+
|
57
|
+
SSG can provide faster load times and less server overhead to traditional SSR, as there is no need to maintain a server to generate the HTML on the fly. However, it is not suitable for websites that require dynamic content, as the HTML is generated during the build process and cannot be updated in real-time.
|
58
|
+
|
59
|
+
## SWC
|
60
|
+
|
61
|
+
import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
|
62
|
+
|
63
|
+
<SWC />
|
@@ -9,9 +9,9 @@ sidebar_label: esbuild
|
|
9
9
|
|
10
10
|
## 介绍
|
11
11
|
|
12
|
-
|
12
|
+
import Esbuild from '@modern-js/builder-doc/docs/zh/shared/esbuild.md';
|
13
13
|
|
14
|
-
|
14
|
+
<Esbuild />
|
15
15
|
|
16
16
|
:::tip 推荐使用 SWC
|
17
17
|
相较于 esbuild,我们更推荐使用 SWC 来编译和压缩代码,因为 SWC 支持更多的语法特性、拥有更好的代码压缩率,并且产物具备更好的兼容性。
|
@@ -9,9 +9,9 @@ sidebar_label: swc
|
|
9
9
|
|
10
10
|
## 介绍
|
11
11
|
|
12
|
-
|
12
|
+
import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
|
13
13
|
|
14
|
-
|
14
|
+
<SWC />
|
15
15
|
|
16
16
|
:::tip
|
17
17
|
在使用 Rspack 作为打包工具时,默认会使用 SWC 进行转译和压缩,因此你不需要再安装和配置 SWC 插件。
|
@@ -0,0 +1,63 @@
|
|
1
|
+
---
|
2
|
+
sidebar_position: 4
|
3
|
+
---
|
4
|
+
|
5
|
+
# 名词解释
|
6
|
+
|
7
|
+
## BFF
|
8
|
+
|
9
|
+
BFF 是 "Backend For Frontend"(前端的后端) 的缩写。它是一种架构模式,表示为前端应用程序创建一个专门的后台服务。
|
10
|
+
|
11
|
+
BFF 服务作为前端应用程序和服务端 API 之间的中介,可以为前端提供定制的 API 供其使用。这允许前端开发者对需要的数据和功能有更多的控制,而不必依赖后端服务提供相应的能力。
|
12
|
+
|
13
|
+
## Bundler
|
14
|
+
|
15
|
+
import Bundler from '@modern-js/builder-doc/docs/zh/shared/bundler.md';
|
16
|
+
|
17
|
+
<Bundler />
|
18
|
+
|
19
|
+
## Builder
|
20
|
+
|
21
|
+
import Builder from '@modern-js/builder-doc/docs/zh/shared/builder.md';
|
22
|
+
|
23
|
+
<Builder />
|
24
|
+
|
25
|
+
## CSR
|
26
|
+
|
27
|
+
CSR 是 "Client-Side Rendering"(客户端渲染)的缩写。它表示页面是在浏览器中通过 JavaScript 渲染的,数据获取、模板和路由等逻辑都在浏览器端完成,而不是在服务器上。
|
28
|
+
|
29
|
+
在 CSR 中,服务器会向浏览器端发送一个空的 HTML 外壳和一些 JavaScript 脚本,然后由浏览器端从服务器的 API 中拉取数据,并将动态内容渲染到页面中。
|
30
|
+
|
31
|
+
## Garfish
|
32
|
+
|
33
|
+
[Garfish](https://garfish.bytedance.net/) 是一套微前端解决方案,主要用于解决 web 应用的跨团队协作、技术体系多样化等问题。
|
34
|
+
|
35
|
+
它从架构层面出发,将多个独立交付的前端应用组成整体,这些前端应用能够独立开发、独立测试、独立部署,但是在用户视角仍然是内聚的单个产品。
|
36
|
+
|
37
|
+
## Rspack
|
38
|
+
|
39
|
+
import Rspack from '@modern-js/builder-doc/docs/zh/shared/rspack.md';
|
40
|
+
|
41
|
+
<Rspack />
|
42
|
+
|
43
|
+
## SSR
|
44
|
+
|
45
|
+
SSR 是 "Server-Side Rendering"(服务器端渲染)的缩写。它表示由服务器生成网页的 HTML,并将其发送给客户端,而不是只发送一个空的 HTML 外壳,并依赖 JavaScript 来生成页面内容。
|
46
|
+
|
47
|
+
在传统的客户端渲染中,服务器会向客户端发送一个空的 HTML 外壳和一些 JavaScript 脚本,然后从服务器的 API 中获取数据,并用动态内容填充页面。这会导致页面的初始加载时间较慢,不利于用户体验和 SEO。
|
48
|
+
|
49
|
+
使用 SSR 后,服务器会生成已经包含动态内容的 HTML,并将其发送给客户端。这使得首屏加载速度更快,并对 SEO 更加友好,因为搜索引擎可以爬取到渲染后的页面。
|
50
|
+
|
51
|
+
## SSG
|
52
|
+
|
53
|
+
SSG 是 "Static Site Generation"(静态网站生成)的缩写。它表示网页被预先渲染成静态的 HTML,然后直接提供给客户端,而不需要服务器实时生成 HTML。
|
54
|
+
|
55
|
+
在传统的 SSR 中,每当用户请求一个页面时,服务器就会实时生成 HTML。有了 SSG,HTML 可以在构建过程中被提前生成,并被托管在 CDN 或其他静态资源服务中。
|
56
|
+
|
57
|
+
与传统的 SSR 相比,SSG 可以提供更快的加载速度以及更少的服务端开销,因为不需要维护一个服务器来实时生成 HTML。然而,SSG 不适合需要动态内容的网站,因为 HTML 是在构建过程中生成的,不支持实时更新。
|
58
|
+
|
59
|
+
## SWC
|
60
|
+
|
61
|
+
import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
|
62
|
+
|
63
|
+
<SWC />
|
package/package.json
CHANGED
@@ -15,13 +15,13 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.
|
18
|
+
"version": "2.19.0",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public"
|
22
22
|
},
|
23
23
|
"peerDependencies": {
|
24
|
-
"@modern-js/builder-doc": "^2.
|
24
|
+
"@modern-js/builder-doc": "^2.19.0"
|
25
25
|
},
|
26
26
|
"devDependencies": {
|
27
27
|
"classnames": "^2",
|
@@ -33,9 +33,9 @@
|
|
33
33
|
"fs-extra": "^10",
|
34
34
|
"@types/node": "^16",
|
35
35
|
"@types/fs-extra": "^9",
|
36
|
-
"@modern-js/builder-doc": "2.
|
37
|
-
"@modern-js/doc-tools": "2.
|
38
|
-
"@modern-js/doc-plugin-auto-sidebar": "2.
|
36
|
+
"@modern-js/builder-doc": "2.19.0",
|
37
|
+
"@modern-js/doc-tools": "2.19.0",
|
38
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.19.0"
|
39
39
|
},
|
40
40
|
"scripts": {
|
41
41
|
"dev": "modern dev",
|