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: 28 additions & 1 deletion website/docs/en/misc/glossary.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ An asset is a resource that is used in your application, such as images, fonts,

## asset module

An "asset module" is a special module type used to process static resources, such as pictures, fonts, videos, etc.
An "asset module" is a special module type used to process static assets, such as pictures, fonts, videos, etc.

- [Asset modules](/guide/features/asset-module)

## bundle

Expand All @@ -18,6 +20,8 @@ Historically bundlers produced a single output file called a "bundle." The conce

Bundle splitting is a technique that allows you to split or merge your code into multiple bundles, which is useful for parallel request and better browser caching, it's not used for reducing the initialize bundle size.

- [Code splitting](/guide/optimization/code-splitting)

## chunk

In bundling terminology, a chunk is a group of modules that get combined into a single data file. Rspack will bundle the modules that are related to each other into a chunk, and then generate a corresponding file.
Expand All @@ -30,6 +34,8 @@ Chunk graph is a data structure that represents the relationship between chunks.

Code splitting is a technique that allows you to split your code into multiple chunks, and only load the necessary chunks when the application is running. This can help you reduce the size of the initial bundle and speed up the application load time.

- [Code splitting](/guide/optimization/code-splitting)

## dependency

Dependency is parsed from the transformed code of a module. It is used to store the import relationships of modules for recursively generating the module graph. When code generation, it can inject code of module imports and exports. It can also be used for code replacement and injecting runtime requirements.
Expand All @@ -38,10 +44,17 @@ Dependency is parsed from the transformed code of a module. It is used to store

In Rspack, first-class module types refer to module types that can be supported without relying on loaders or plugins, such as JavaScript, CSS, JSON, Assets, etc. However, module types that require loaders or plugins to support, such as TypeScript, HTML, Markdown, YAML, etc., are not first-class citizen modules.

- [Asset modules](/guide/features/asset-module)
- [CSS](/guide/tech/css)
- [JSON](/guide/tech/json)
- [Rule.type](/config/module#ruletype)

## loader

In bundling terminology, a loader is like a plugin but specifically tasked with transforming module content. For example, we can use a loader to transform a TypeScript module into a JavaScript module, or to transform a CSS module into a JavaScript module that injects the CSS into the page.

- [Loader](/guide/features/loader)

## module

An application can be split into multiple files called modules, which may be JavaScript source files or other assets such as images or CSS. These files can share and reuse module content by importing and exporting, which helps organize your code into independent parts and define formalized interfaces for communication between them.
Expand All @@ -50,6 +63,8 @@ An application can be split into multiple files called modules, which may be Jav

A module's type determines how it will be parsed and handled by the bundler. For example, we can tell Rspack that the module is a JavaScript module by specifying the module type as JavaScript, and Rspack will use the JavaScript parser to parse the module. If the specified module type is CSS, then Rspack will use a CSS parser to parse the module.

- [Rule.type](/config/module#ruletype)

## module specifier

A module specifier is a string that can be resolved to a path to the module file. For example, in the following code, `./modules/foo.js` is a module specifier.
Expand All @@ -62,8 +77,12 @@ import { foo } from './modules/foo.js';

Module resolution is the process of calculating the file path indicated by a module specifier. For example, an import statement includes a module specifier, and Rspack will use the module resolution algorithm to find the corresponding file path.

- [Module resolution](/guide/features/module-resolution)

## module graph

> module graph is also called dependency graph.

The module graph is a graph data structure that represents relationships between modules. It is a directed graph, where each node in the graph represents a module, and each edge represents the dependency relationship between modules.

## NAPI-RS
Expand All @@ -74,14 +93,22 @@ The module graph is a graph data structure that represents relationships between

A plugin is a program module that can be used to extend the functionality of Rspack by means of extensibility hooks. It can be used to customize the build process, or to integrate with other tools. Rspack provides lots of hooks which you can use to customize the build process.

- [Plugin](/guide/features/plugin)

## runtime

The runtime is all the code Rspack needs to connect your modularized application while it's running in the browser or other environments. It contains the loading and resolving logic needed to connect your modules as they interact.

- [optimization.runtimeChunk](/config/optimization#optimizationruntimechunk)

## scope hoisting

Scope hoisting is a technique that concat modules into a single scope when possible, rather than wrapping each module in a separate function. It can make minification more effective and improve runtime performance by reduce module lookup cost.

- [optimization.concatenateModules](/config/optimization#optimizationconcatenatemodules)

## tree shaking

Tree shaking is a technique that allows you to remove unused code from your bundle. It a form of compiler dead code elimination, with a focus on minimizing processing of dead code. Compilers like Rspack will accomplish this by analyzing the static structure of your code, and then removing the unused code.

- [Tree shaking](/guide/optimization/tree-shaking)
33 changes: 30 additions & 3 deletions website/docs/zh/misc/glossary.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,20 @@

## asset(静态资源)

静态资源是对 图像、字体、视频等静态文件的统称。这些文件通常会最终输出为单独的文件,而不是打包到代码块中,但是通过其也可以转换成 base64 内联到代码块中
静态资源是对图像、字体、视频等静态文件的统称。这些文件通常会最终输出为单独的文件,而不是打包到代码块中,但是通过其也可以转换成 base64 内联到代码块中

## asset module(资源模块)

Asset 模块是一种特殊的模块类型,用来处理静态资源,例如图片、字体、视频等。

- [资源模块](/guide/features/asset-module)

## bundle splitting

Bundle splitting 是一种允许你将代码分割或合并到多个 bundle 的技术,这对于并行请求和更好的浏览器缓存很有用,它不用于减少初始化 bundle 的大小。

- [代码分割](/guide/optimization/code-splitting)

## chunk

Chunk 是一组绑定在一起的模块。rspack 会将相互关联的模块打包成一个 chunk,然后生成对应的文件。
Expand All @@ -26,18 +30,27 @@ Chunk 图是一种表示块之间关系的数据结构。它是一个有向图

Code splitting 是一种技术,它允许你将你的代码分割成多个块,并且只在应用程序运行时加载必要的块。这可以帮助你减少初始包的大小,加快应用程序的加载时间。

- [代码分割](/guide/optimization/code-splitting)

## dependency

Dependency 是从模块编译后的代码解析出来的,它用于存储模块的导入关系,以便递归生成模块图。在生成产物代码时,它可以注入模块的导入和导出相关代码,也可以用于代码替换和注入运行时依赖。

## first class module type(一等公民模块类型)

Rspack 中的一等公民模块指的是那些不需要依赖 loader 和 plugin 即可支持的模块类型,例如 JavaScript、CSS、JSON、资源等,而像 TypeScript、HTML、Markdown、YAML 等需要依赖 loader 和 plugin 才能支持的模块类型则不是一等公民模块。
Rspack 中的一等公民模块指的是那些不需要依赖 loader 和 plugin 即可支持的模块类型,例如 JavaScript、CSS、JSON、静态资源等,而像 TypeScript、HTML、Markdown、YAML 等需要依赖 loader 和 plugin 才能支持的模块类型则不是一等公民模块。

- [资源模块](/guide/features/asset-module)
- [CSS](/guide/tech/css)
- [JSON](/guide/tech/json)
- [Rule.type](/config/module#ruletype)

## loader

Loader 是用来转换模块内容的。例如,我们可以使用 loader 将 TypeScript 模块转化为 JavaScript 模块,或者将 CSS 模块转化为 JavaScript 模块,将 CSS 注入到页面中。

- [Loader](/guide/features/loader)

## module(模块)

模块允许你将应用拆分为多个文件,并且在这些文件可以通过导入和导出进行模块内容的共享和复用,这可以帮助你将代码组织成独立的部分,并使用良好的接口在彼此间进行通信。
Expand All @@ -46,6 +59,8 @@ Loader 是用来转换模块内容的。例如,我们可以使用 loader 将 T

模块类型是模块的一种属性,它们可以通过不同的方式进行解析和处理。我们可以通过指明模块的模块类型来告诉 Rspack 如何处理它们。例如,我们可以通过指定模块类型为 JavaScript 来告诉 Rspack 该模块是一个 JavaScript 模块,然后 Rspack 就会使用 JavaScript 解析器来解析该模块,如果指定的模块类型为 CSS,那么 Rspack 就会使用 CSS 解析器来解析该模块。

- [Rule.type](/config/module#ruletype)

## module specifier(模块标识符)

模块标识符是一个可以解析为模块文件路径的字符串。例如,在下面的代码中,`./modules/foo.js` 就是模块标识符。
Expand All @@ -58,7 +73,11 @@ import { foo } from './modules/foo.js';

模块解析是指 Rspack 如何找到模块的过程。Rspack 会根据模块的路径来解析模块,例如,当我们在代码中使用 `import 'foo'` 时,Rspack 就会根据模块的路径来解析模块。

## module graph | dependency graph(模块图 | 依赖图)
- [模块解析](/guide/features/module-resolution)

## module graph(模块图)

> module graph 也被称为 dependency graph(依赖图)。

模块图是一种表示模块之间关系的数据结构。它是一个有向图,图中的每个节点代表一个模块,每条边代表模块之间的依赖关系。

Expand All @@ -70,14 +89,22 @@ import { foo } from './modules/foo.js';

插件可以用来扩展 Rspack 的功能。它可以用来定制构建过程,或与其他工具集成。Rspack 提供了很多钩子,你可以用它们来定制构建过程。

- [插件](/guide/features/plugin)

## runtime

runtime(运行时)是指在浏览器或其他环境中运行过程中,Rspack 用来连接模块化应用所需的所有代码。它包含了连接模块所需的加载和解析逻辑。

- [optimization.runtimeChunk](/config/optimization#optimizationruntimechunk)

## scope hoisting (作用域合并)

作用域提升是一种将多个模块作用域进行合并的技术,它在可能的情况下将多个模块合并到一个单一的作用域中,而不是将每个模块包装在单独的函数中。这样对代码压缩更友好,并可以通过减少模块查找成本来提高运行时性能。

- [optimization.concatenateModules](/config/optimization#optimizationconcatenatemodules)

## tree shaking (摇树优化)

Tree shaking 是一种允许你从包中删除未使用代码的技术。它是一种特殊的死代码优化方式。像 Rspack 这样的编译器将通过分析代码的静态语法,然后删除未使用的代码来完成此操作。

- [Tree shaking](/guide/optimization/tree-shaking)
Loading