You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/en/config/devtool.mdx
+24-32Lines changed: 24 additions & 32 deletions
Original file line number
Diff line number
Diff line change
@@ -32,28 +32,28 @@ type Devtool = 'string' | false;
32
32
- Extremely fast build speed
33
33
-**Full source code mapping needed** → Proceed to [Step 3](#step-3-configure-sourcemap)
34
34
35
-
### Step 3: Configure SourceMap
35
+
### Step 3: Configure source map
36
36
37
-
Set `devtool: 'source-map'`, A full SourceMap is emitted as a separate file. It adds a `//# sourceMapURL` comment to the bundle so development tools know where to find it.
37
+
Set `devtool: 'source-map'`, A full source map is emitted as a separate file. It adds a `//# sourceMapURL` comment to the bundle so development tools know where to find it.
38
38
39
-
It also supports combination with the following modifiers to improve performance and control SourceMap generation.
39
+
It also supports combination with the following modifiers to improve performance and control source map generation.
40
40
41
41
Performance optimization modifiers, to speed up the build, usually used in development environments:
| eval | Each module is executed with `eval()` and a SourceMap is added as a DataUrl to the `eval()`, avoiding chunk-level multiple SourceMap concate | ⚡⚡⚡ |
46
-
| cheap | Maps line numbers only (no columns), ignores source maps from loaders | ⚡⚡ |
47
-
| module | Processes source maps from loaders to map to original code (line-only mapping) | ⚡ |
| eval | Each module is executed with `eval()` and a source map is added as a DataUrl to the `eval()`, avoiding chunk-level multiple source map concate | ⚡⚡⚡ |
46
+
| cheap | Maps line numbers only (no columns), ignores source maps from loaders | ⚡⚡ |
47
+
| module | Processes source maps from loaders to map to original code (line-only mapping) | ⚡ |
48
48
49
-
Functional modifiers, to control SourceMap generation, usually used in production environments:
49
+
Functional modifiers, to control source map generation, usually used in production environments:
| hidden |SourceMap is emitted as a separate file, but no `//# sourceMappingURL=[url]` comment is added to the bundle, protecting source code privacy |
54
-
| inline |SourceMap is added as a DataUrl to the bundle |
55
-
| nosources |SourceMap is created without the `sourcesContent` in it |
56
-
| debugids |SourceMap is created with the `debugId` in it |
| hidden |source map is emitted as a separate file, but no `//# sourceMappingURL=[url]` comment is added to the bundle, protecting source code privacy |
54
+
| inline |source map is added as a DataUrl to the bundle |
55
+
| nosources |source map is created without the `sourcesContent` in it |
56
+
| debugids |source map is created with the `debugId` in it |
57
57
58
58
We expect a certain pattern when validate devtool name, pay attention and don't mix up the sequence of devtool string. The pattern is: `[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map[-debugids]`.
59
59
@@ -63,34 +63,26 @@ We expect a certain pattern when validate devtool name, pay attention and don't
63
63
64
64
The following options are ideal for development:
65
65
66
-
`eval` - Each module is executed with `eval()` and `//# sourceURL`. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code (No Source Maps from Loaders).
66
+
`eval` - Each module is executed with `eval()` and `//# sourceURL`. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code (No source maps from Loaders).
67
67
68
-
`eval-source-map` - Each module is executed with `eval()` and a SourceMap is added as a DataUrl to the `eval()`. Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality SourceMaps for development.
68
+
`eval-source-map` - Each module is executed with `eval()` and a source map is added as a DataUrl to the `eval()`. Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality source maps for development.
69
69
70
-
`eval-cheap-source-map` - Similar to `eval-source-map`, each module is executed with `eval()`. It is "cheap" because it doesn't have column mappings, it only maps line numbers. It ignores SourceMaps from Loaders and only display transpiled code similar to the eval devtool.
70
+
`eval-cheap-source-map` - Similar to `eval-source-map`, each module is executed with `eval()`. It is "cheap" because it doesn't have column mappings, it only maps line numbers. It ignores source maps from Loaders and only display transpiled code similar to the eval devtool.
71
71
72
-
`eval-cheap-module-source-map` - Similar to `eval-cheap-source-map`, however, in this case Source Maps from Loaders are processed for better results. However Loader Source Maps are simplified to a single mapping per line.
72
+
`eval-cheap-module-source-map` - Similar to `eval-cheap-source-map`, however, in this case source maps from Loaders are processed for better results. However Loader source maps are simplified to a single mapping per line.
73
73
74
74
### Production
75
75
76
76
These options are typically used in production:
77
77
78
-
'false' - No SourceMap is emitted. This is a good option to start with.
78
+
'false' - No source map is emitted. This is a good option to start with.
79
79
80
-
`source-map` - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.
80
+
`source-map` - A full source map is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.
81
81
82
-
:::warning
83
-
You should configure your server to disallow access to the Source Map file for normal users!
84
-
:::
85
-
86
-
`hidden-source-map` - Same as `source-map`, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.
87
-
88
-
:::warning
89
-
You should not deploy the Source Map file to the webserver. Instead only use it for error report tooling.
90
-
:::
82
+
`hidden-source-map` - Same as `source-map`, but doesn't add a reference comment to the bundle. Useful if you only want source maps to map error stack traces from error reports, but don't want to expose your source map for the browser development tools.
91
83
92
-
`nosources-source-map` - A SourceMap is created without the `sourcesContent` in it. It can be used to map stack traces on the client without exposing all of the source code. You can deploy the Source Map file to the webserver.
84
+
`nosources-source-map` - A source map is created without the `sourcesContent`(the original source code) in it. It still exposes the original filenames and structure and can be used to map stack traces on the client without exposing the source code. This kind of source map can be deployed to the web server if you can accept the file name being exposed.
93
85
94
86
:::warning
95
-
It still exposes original filenames and structure, but it doesn't expose the original code.
87
+
When using `source-map` or `hidden-source-map`, do not deploy the source maps (`.map` file) to the public web server or CDN. Public source maps will expose your source code and may bring security risks.
Copy file name to clipboardExpand all lines: website/docs/en/config/optimization.mdx
+8Lines changed: 8 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -427,6 +427,14 @@ Here we assign the `value` to `value2`. Both `value2` and `value` are accessed w
427
427
428
428
Tells Rspack to find segments of the module graph which can be safely concatenated into a single module. Depends on [optimization.providedExports](#optimizationprovidedexports) and [optimization.usedExports](#optimizationusedexports). By default `optimization.concatenateModules` is enabled in `production` mode and disabled elsewise.
Copy file name to clipboardExpand all lines: website/docs/en/guide/optimization/analysis.mdx
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,8 @@
1
1
# Bundle analysis
2
2
3
-
## webpack-bundle-analyzer
4
-
5
-
Rspack's Command Line Interface (CLI) supports bundle analysis out-of-box via the `--analyze` option. It uses [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) behind the scenes.
6
-
7
-
```sh
8
-
$ rspack build --analyze
9
-
```
10
-
11
-
## bundle-stats and statoscope
12
-
13
-
You can also generate a `stats.json` file for further analysis with other bundle analysis tools like [bundle-stats](https://github.com/relative-ci/bundle-stats) or [statoscope](https://statoscope.tech/):
14
-
15
-
```sh
16
-
$ rspack build --json stats.json
17
-
```
18
-
19
3
## Rsdoctor's bundle analysis
20
4
21
-
Rsdoctor provides the `Bundle Size` module, which is mainly used to analyze the information of the outputs of Rspack, including the size of resources, duplicate packages, and module reference relationships:
5
+
[Rsdoctor](/guide/optimization/use-rsdoctor) provides the `Bundle Size` module, which is mainly used to analyze the information of the outputs of Rspack, including the size of resources, duplicate packages, and module reference relationships:
22
6
23
7
-**Bundle Overview**: Displays the total number and size of artifacts, as well as the number and size of each file type. It also shows the duplicate packages and their reference chains.
24
8
-**Bundle Analysis Module**: Analyzes the size and code information of the build artifacts' resources (**Assets**) and the included **Modules**. In this module, you can view the **actual code size of modules after packaging** in the Assets, as well as the original code or **packaged code segments** and **module reference relationships**.
@@ -44,3 +28,19 @@ You can use [Rsdoctor](https://rsdoctor.rs) to detect whether there are duplicat
For more details, see [Rsdoctor - Duplicate Dependency Problem](https://rsdoctor.rs/blog/topic/duplicate-pkg-problem).
31
+
32
+
## webpack-bundle-analyzer
33
+
34
+
Rspack's Command Line Interface (CLI) supports bundle analysis out-of-box via the `--analyze` option. It uses [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) behind the scenes.
35
+
36
+
```sh
37
+
$ rspack build --analyze
38
+
```
39
+
40
+
## bundle-stats and statoscope
41
+
42
+
You can also generate a `stats.json` file for further analysis with other bundle analysis tools like [bundle-stats](https://github.com/relative-ci/bundle-stats) or [statoscope](https://statoscope.tech/):
Copy file name to clipboardExpand all lines: website/docs/en/guide/optimization/production.mdx
+14-4Lines changed: 14 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,22 @@
1
-
# Production
1
+
# Production optimization
2
2
3
-
## Source mapping
3
+
## Code splitting
4
4
5
-
It is recommended to enable SourceMap for production environments to facilitate debugging in production environments. If you have a large project, it is recommended that you choose a configuration with better performance (see [devtool](config/devtool) for more options), such as the `source-map` configuration option.
5
+
Rspack supports code splitting, which allows splitting the code into other chunks. You have the full control about size and number of generated assets, which allow you to gain performance improvements in loading time.
6
+
7
+
See [Code splitting](/guide/optimization/code-splitting) for more details.
8
+
9
+
## Tree shaking
10
+
11
+
Rspack supports tree shaking, a terminology widely used within the JavaScript ecosystem defined as the removal of unused code, commonly referred to as "dead code".
12
+
13
+
See [Tree shaking](/guide/optimization/tree-shaking) for more details.
6
14
7
15
## Minification
8
16
9
-
During the production build, Rspack uses the built-in minimizer to minify JavaScript and CSS code by default. You can use [SwcJsMinimizerRspackPlugin](/plugins/rspack/swc-js-minimizer-rspack-plugin) and [LightningCssMinimizerRspackPlugin](/plugins/rspack/lightning-css-minimizer-rspack-plugin) for configuration.
17
+
During the production build, Rspack uses the built-in minimizer to minify JavaScript and CSS code by default.
18
+
19
+
If you need to customize the minification options, you can use [SwcJsMinimizerRspackPlugin](/plugins/rspack/swc-js-minimizer-rspack-plugin) and [LightningCssMinimizerRspackPlugin](/plugins/rspack/lightning-css-minimizer-rspack-plugin) for configuration.
Copy file name to clipboardExpand all lines: website/docs/en/guide/optimization/tree-shaking.mdx
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Tree shaking
2
2
3
-
Rspack supports [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking), a terminology widely used within the JavaScript ecosystem defined as the removal of unused code, commonly referred to as "dead code." Dead code arises when certain exports from a module are not used and they lack side effects, allowing such pieces to be safely deleted to reduce the final output size.
3
+
Rspack supports [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking), a terminology widely used within the JavaScript ecosystem defined as the removal of unused code, commonly referred to as "dead code". Dead code arises when certain exports from a module are not used and they lack side effects, allowing such pieces to be safely deleted to reduce the final output size.
0 commit comments