@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 CHANGED
@@ -1,5 +1,11 @@
1
1
  # @modern-js/main-doc
2
2
 
3
+ ## 2.19.0
4
+
5
+ ### Patch Changes
6
+
7
+ - @modern-js/builder-doc@2.19.0
8
+
3
9
  ## 2.18.1
4
10
 
5
11
  ### Patch Changes
@@ -9,9 +9,9 @@ sidebar_label: esbuild
9
9
 
10
10
  ## Introduction
11
11
 
12
- [esbuild](https://esbuild.github.io/) is a front-end build tool based on Golang. It has the functions of bundling, compiling and minimizing JavaScript code. Compared with traditional tools, the performance is significantly improved. When minimizing code, compared to webpack's built-in terser minimizer, esbuild has dozens of times better performance.
12
+ import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
13
13
 
14
- Modern.js provides esbuild plugin that allow you to use esbuild instead of babel-loader, ts-loader and terser for transformation and minification process.
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
- [SWC](https://SWC.rs/) (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on `Rust`. SWC can provide the same abilities with Babel, and it's more than 10x faster than Babel.
12
+ import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
13
13
 
14
- Modern.js Builder has a out-of-box plugin for SWC, power your Web application with Polyfill and minification, we also port some common used Babel plugins to SWC.
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
- [esbuild](https://esbuild.github.io/) 是一款基于 Golang 开发的前端构建工具,具有打包、编译和压缩 JavaScript 代码的功能,相比传统的打包编译工具,esbuild 在性能上有显著提升。在代码压缩方面,相比 webpack 内置的 terser 压缩器,esbuild 在性能上有数十倍的提升。
12
+ import Esbuild from '@modern-js/builder-doc/docs/zh/shared/esbuild.md';
13
13
 
14
- Modern.js 提供了 esbuild 插件,让你能使用 esbuild 代替 babel-loader、ts-loader 和 terser 等库进行代码编译和压缩。在大型工程中开启后,**可以大幅度减少代码编译和压缩所需的时间,同时有效避免 OOM (heap out of memory) 问题**。
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
- [SWC](https://swc.rs/) (Speedy Web Compiler) 是基于 `Rust` 语言编写的高性能 JavaScript 和 TypeScript 转译和压缩工具。在 Polyfill 和语法降级方面可以和 Babel 提供一致的能力,并且比 Babel 性能高出 10 倍不止。
12
+ import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
13
13
 
14
- Modern.js 提供了开箱即用的 SWC 插件,可以为你的 Web 应用提供语法降级、Polyfill 以及压缩,并且移植了一些额外常见的 Babel 插件。
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.1",
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.18.1"
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.18.1",
37
- "@modern-js/doc-tools": "2.18.1",
38
- "@modern-js/doc-plugin-auto-sidebar": "2.18.1"
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",