@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.0

package/docs/en/configure/app/output/inline-styles.mdx

@@ -0,0 +1,33 @@
+---
+title: inlineStyles
+---
+
+# output.inlineStyles
+
+- **Type:**
+
+```ts
+type InlineStylesTest =
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+
+type InlineStyles =
+  | boolean
+  | InlineStylesTest
+  | {
+      enable?: boolean | 'auto';
+      test: InlineStylesTest;
+    };
+```
+
+- **Default:** `false`
+
+Whether to inline output style files (.css files) into HTML with `<style>` tags.
+
+:::tip
+When using convention-based routing, you need to set [output.splitRouteChunks](/configure/app/output/split-route-chunks) to false if this option is turned on.
+:::
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="output.inlineStyles" />

package/docs/en/configure/app/output/legal-comments.mdx

@@ -0,0 +1,22 @@
+---
+title: legalComments
+---
+
+# output.legalComments
+
+- **Type:** `'linked' | 'inline' | 'none'`
+- **Default:** `'linked'`
+
+Configure how to handle the legal comment.
+
+A "legal comment" is considered to be any statement-level comment in JS or rule-level comment in CSS that contains `@license` or `@preserve` or that starts with `//!` or `/*!`. These comments are preserved in output files by default since that follows the intent of the original authors of the code.
+
+This behavior can be configured by using one of the following options:
+
+- `linked`: Extract all legal comments to a .LEGAL.txt file and link to them with a comment.
+- `inline`: Preserve all legal comments in original position.
+- `none`: Remove all legal comments.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="output.legalComments" />

package/docs/en/configure/app/output/minify.mdx

@@ -0,0 +1,26 @@
+---
+title: minify
+---
+
+# output.minify
+
+- **Type:**
+
+```ts
+type Minify =
+  | boolean
+  | {
+      js?: boolean;
+      jsOptions?: SwcJsMinimizerRspackPluginOptions;
+      css?: boolean;
+      cssOptions?: LightningCssMinimizerRspackPluginOptions;
+    };
+```
+
+- **Default:** `true`
+
+Configure whether to enable code minification in production mode, or to configure minimizer options.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="output.minify" />

package/docs/en/configure/app/output/override-browserslist.mdx

@@ -0,0 +1,26 @@
+---
+title: overrideBrowserslist
+---
+
+# output.overrideBrowserslist
+
+- **Type:** `string[] | undefined`
+- **Default:**
+
+```ts
+const defaultBrowserListMap: Record<RsbuildTarget, string[]> = {
+  web: ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'],
+  node: ['node >= 14'],
+  'web-worker': ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'],
+};
+```
+
+Specifies the range of target browsers that the project is compatible with.
+
+This value will be used by [SWC](https://github.com/swc-project/swc) and [autoprefixer](https://github.com/postcss/autoprefixer) to identify the JavaScript syntax that need to be transformed and the CSS browser prefixes that need to be added.
+
+For other configuration methods and configuration priorities, please refer to the [Browserslist configuration](/guides/advanced-features/compatibility.html).
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="output.overrideBrowserslist" />

package/docs/en/configure/app/output/polyfill.mdx

@@ -0,0 +1,18 @@
+---
+title: polyfill
+---
+
+# output.polyfill
+
+- **Type:** `'entry' | 'usage' | 'ua' | 'off'`
+- **Default:** `'entry'`
+
+Via `output.polyfill` you can configure how the polyfill is injected.
+
+import OutputPolyfillExtend from '@site-docs-en/components/output-polyfill-extend';
+
+<OutputPolyfillExtend />
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="output.polyfill" />

package/docs/en/configure/app/output/source-map.mdx

@@ -0,0 +1,34 @@
+---
+title: sourceMap
+---
+
+# output.sourceMap
+
+- **Type:**
+
+```ts
+type SourceMap =
+  | boolean
+  | {
+      js?: Rspack.Configuration['devtool'];
+      css?: boolean;
+    };
+```
+
+- **Default:**
+
+```ts
+const defaultSourceMap = {
+  js: isDev ? 'cheap-module-source-map' : 'hidden-source-map',
+  css: isDev,
+};
+```
+
+When `output.sourceMap` is not configured, the source map generation rules of Modern.js are different from Rsbuild:
+
+- In the development mode, JS and CSS source maps are generated for development debugging.
+- In the production mode, JS source maps are generated for stack trace backtracking, and CSS source maps are not generated to provide the best build performance.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="output.sourceMap" />

package/docs/en/configure/app/output/split-route-chunks.mdx

@@ -0,0 +1,20 @@
+---
+title: splitRouteChunks
+---
+
+# output.splitRouteChunks
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+When using convention-based routing, the framework will split js and css based on the route to load on demand. If your project does not want to split js and css based on routes, you can set this option to `false`.
+
+Example:
+
+```ts
+export default {
+  output: {
+    splitRouteChunks: false,
+  },
+}
+```

package/docs/en/configure/app/output/ssg.mdx

@@ -0,0 +1,85 @@
+---
+title: ssg
+---
+
+# output.ssg
+
+- **Type:** `boolean | object`
+- **Default Value:** `undefined`
+
+Configuration to enable the application’s SSG (Static Site Generation) feature.
+
+:::tip Enabling SSG
+This configuration takes effect only when SSG is enabled. Please read the [Static Site Generation](/guides/basic-features/render/ssg) documentation to understand how to enable SSG and its use cases.
+
+:::
+
+:::info Recommended Reading
+The SSG feature is closely related to routing. It is recommended to understand the [routing solution](/guides/basic-features/routes/routes) before using SSG.
+
+:::
+
+:::info
+- Use `output.ssg` for single-entry apps.
+- For multi-entry apps, prefer `output.ssgByEntries`.
+- If `output.ssg` is `true` and `output.ssgByEntries` is not set, all routes under all entries are treated as SSG routes.
+
+:::
+
+## Boolean Type
+
+When this configuration is set to `true`, the SSG feature will be enabled for all entries by default. For **manual routing**, the root route of the entry will be rendered. For **conventional routing**, each route in the entry will be rendered.
+
+```js
+export default defineConfig({
+  output: {
+    ssg: true,
+  },
+});
+```
+
+## Object Type
+
+When the value type is `Object`, the following attributes can be configured.
+
+### Configuration Type
+
+```ts
+type SSGRouteOptions =
+  | string
+  | {
+      url: string;
+      headers?: Record<string, any>;
+    };
+
+type SSGOptions = {
+  headers?: Record<string, any>;
+  routes?: SSGRouteOptions[];
+};
+```
+
+### Example
+
+In the example configuration below, SSG will render the pages corresponding to the `/`, `/about`, and `/user/:id` routes.
+
+For the `/user/:id` route, `cookies` will be added to the request headers.
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  output: {
+    ssg: {
+      routes: [
+        '/',
+        '/about',
+        {
+          url: '/user/modernjs',
+          headers: {
+            cookies: 'name=modernjs',
+          },
+        },
+      ],
+    },
+  },
+});
+```
+

package/docs/en/configure/app/output/ssgByEntries.mdx

@@ -0,0 +1,93 @@
+---
+title: ssgByEntries
+---
+
+# output.ssgByEntries
+
+- **Type:** `Record<string, boolean | object>`
+- **Default Value:** `undefined`
+
+Configure SSG per entry for multi-entry applications.
+
+:::info
+- Use `output.ssg` for single-entry apps.
+- For multi-entry apps, prefer `output.ssgByEntries`.
+- If `output.ssg` is `true` and `output.ssgByEntries` is not set, all routes under all entries are treated as SSG routes.
+
+:::
+
+## Configuration Type
+
+```ts
+type SSGRouteOptions =
+  | string
+  | {
+      url: string;
+      headers?: Record<string, any>;
+    };
+
+type SSGOptions = {
+  headers?: Record<string, any>;
+  routes?: SSGRouteOptions[];
+};
+
+// ssgByEntries type
+type SSGMultiEntryOptions = Record<string, boolean | SSGOptions>;
+```
+
+## Examples
+
+### Enable SSG for some entries
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  output: {
+    ssgByEntries: {
+      home: true,
+      admin: false,
+    },
+  },
+});
+```
+
+### Configure routes per entry
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  output: {
+    ssgByEntries: {
+      home: {
+        routes: ['/', '/about', '/user/modernjs'],
+      },
+      admin: {
+        routes: ['/', '/dashboard'],
+      },
+    },
+  },
+});
+```
+
+### Configure headers per entry or route
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  output: {
+    ssgByEntries: {
+      home: {
+        headers: {
+          'x-tt-env': 'ppe_modernjs',
+        },
+        routes: [
+          '/',
+          {
+            url: '/about',
+            headers: {
+              from: 'modern-website',
+            },
+          },
+        ],
+      },
+    },
+  },
+});
+```

package/docs/en/configure/app/output/svg-default-export.mdx

@@ -0,0 +1,34 @@
+---
+title: svgDefaultExport
+---
+
+# output.svgDefaultExport
+
+- **Type:** `'url' | 'component'`
+- **Default:** `'url'`
+
+`output.svgDefaultExport` is used to configure the default export type of SVG files.
+
+When `output.svgDefaultExport` is set to `url` , the default export of SVG files is the URL of the file. For example:
+
+```js
+import logo from './logo.svg';
+
+console.log(logo); // => asset url
+```
+
+When `output.svgDefaultExport` is set to `component` , the default export of SVG files is the React component of the file. For example:
+
+```js
+import Logo from './logo.svg';
+
+console.log(Logo); // => React Component
+```
+
+At this time, you can also specify the `?url` query to import the URL, for example:
+
+```js
+import logo from './logo.svg?url';
+
+console.log(logo); // => asset url
+```

package/docs/en/configure/app/output/temp-dir.mdx

@@ -0,0 +1,24 @@
+---
+title: tempDir
+---
+
+# output.tempDir
+
+- **Type:** `string`
+- **Default:** `''`
+
+When developing or building a project, Modern.js generates real Rspack entries and HTML templates, placing them in a temporary directory.
+
+If you want to start a project with multiple configurations at the same time, you can use this configuration to generate files in different temporary directories to avoid interference with each other.
+
+The configuration can be a relative or absolute path, but paths outside the project should be avoided.
+
+Example:
+
+```ts
+export default {
+  output: {
+    tempDir: path.join('node_modules', '.temp-dir'),
+  },
+};
+```

package/docs/en/configure/app/performance/build-cache.mdx

@@ -0,0 +1,43 @@
+---
+title: buildCache
+---
+
+# performance.buildCache
+
+- **Type:**
+
+```ts
+type BuildCacheConfig =
+  | {
+      /**
+       * Base directory for the filesystem cache.
+       */
+      cacheDirectory?: string;
+      /**
+       * Set different cache names based on cacheDigest content.
+       */
+      cacheDigest?: Array<string | undefined>;
+      /**
+       * An arrays of additional code dependencies for the build.
+       * Rspack will use a hash of each of these items and all dependencies to invalidate the filesystem cache.
+       */
+      buildDependencies?: string[];
+    }
+  | boolean;
+```
+
+Controls the caching behavior during the build process.
+
+Modern.js will enable build cache by default to improve the compile speed. You can disable the build cache by setting it to `false`:
+
+```js
+export default {
+  performance: {
+    buildCache: false,
+  },
+};
+```
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.buildCache" />

package/docs/en/configure/app/performance/chunk-split.mdx

@@ -0,0 +1,44 @@
+---
+title: chunkSplit
+---
+
+# performance.chunkSplit
+
+- **Type:** `Object`
+- **Default:** `{ strategy: 'split-by-experience' }`
+
+`performance.chunkSplit` is used to configure the chunk splitting strategy. The type of `ChunkSplit` is as follows:
+
+```ts
+type ForceSplitting = RegExp[] | Record<string, RegExp>;
+
+interface BaseChunkSplit {
+  strategy?:
+    | 'split-by-module'
+    | 'split-by-experience'
+    | 'all-in-one'
+    | 'single-vendor';
+  override?: SplitChunks;
+  forceSplitting?: ForceSplitting;
+}
+
+interface SplitBySize {
+  strategy?: 'split-by-size';
+  minSize?: number;
+  maxSize?: number;
+  override?: SplitChunks;
+  forceSplitting?: ForceSplitting;
+}
+
+interface SplitCustom {
+  strategy?: 'custom';
+  splitChunks?: SplitChunks;
+  forceSplitting?: ForceSplitting;
+}
+
+export type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;
+```
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.chunkSplit" />

package/docs/en/configure/app/performance/dns-prefetch.mdx

@@ -0,0 +1,19 @@
+---
+title: dnsPrefetch
+---
+
+# performance.dnsPrefetch
+
+- **Type:** `undefined | string[]`
+
+- **Default:** `undefined`
+
+Specifies that the user agent should preemptively perform DNS resolution for the target resource's origin, refer to [dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/dns-prefetch).
+
+After this property is set, the domain name can be resolved before the resource is requested, reducing request latency and improving loading performance.
+
+See [Using dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch) for more details.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.dnsPrefetch" />

package/docs/en/configure/app/performance/preconnect.mdx

@@ -0,0 +1,20 @@
+---
+title: preconnect
+---
+
+# performance.preconnect
+
+- **Type:** `undefined | Array<string | PreconnectOption>`
+
+```ts
+interface PreconnectOption {
+  href: string;
+  crossorigin?: boolean;
+}
+```
+
+- **Default:** `undefined`
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.preconnect" />

package/docs/en/configure/app/performance/prefetch.mdx

@@ -0,0 +1,25 @@
+---
+title: prefetch
+---
+
+# performance.prefetch
+
+- **Type:** `undefined | true | PrefetchOption`
+
+```ts
+type IncludeType = 'async-chunks' | 'initial' | 'all-assets' | 'all-chunks';
+
+type Filter = Array<string | RegExp> | ((filename: string) => boolean);
+
+interface PrefetchOption {
+  type?: IncludeType;
+  include?: Filter;
+  exclude?: Filter;
+}
+```
+
+- **Default:** `undefined`
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.prefetch" />

package/docs/en/configure/app/performance/preload.mdx

@@ -0,0 +1,27 @@
+---
+title: preload
+---
+
+# performance.preload
+
+- **Type：** `undefined | true | PreloadOption`
+
+```ts
+type IncludeType = 'async-chunks' | 'initial' | 'all-assets' | 'all-chunks';
+
+type Filter = Array<string | RegExp> | ((filename: string) => boolean);
+
+interface PreloadOption {
+  type?: IncludeType;
+  include?: Filter;
+  exclude?: Filter;
+}
+```
+
+- **Default：** `undefined`
+
+Inject the [`<link rel="preload">`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel/preload) tags for the static assets generated by Rsbuild.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.preload" />

package/docs/en/configure/app/performance/print-file-size.mdx

@@ -0,0 +1,44 @@
+---
+title: printFileSize
+---
+
+# performance.printFileSize
+
+- **Type:**
+
+```ts
+type PrintFileSizeOptions =
+  | {
+      /**
+       * whether to print total size
+       */
+      total?: boolean;
+      /**
+       * whether to print size of each file
+       */
+      detail?: boolean;
+      /**
+       * whether to print gzip-compressed size
+       */
+      compressed?: boolean;
+    }
+  | boolean;
+```
+
+- **Default:** `true`
+
+Whether to print the file sizes after production build.
+
+```bash
+info    Production file sizes:
+
+  File                                      Size         Gzipped
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
+```
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.printFileSize" />

package/docs/en/configure/app/performance/profile.mdx

@@ -0,0 +1,14 @@
+---
+title: profile
+---
+
+# performance.profile
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Whether capture timing information for each module, same as the [profile](https://rspack.rs/config/other-options#profile) config of Rspack.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.profile" />

package/docs/en/configure/app/performance/remove-console.mdx

@@ -0,0 +1,14 @@
+---
+title: removeConsole
+---
+
+# performance.removeConsole
+
+- **Type:** `boolean | ConsoleType[]`
+- **Default:** `false`
+
+Whether to remove `console.[methodName]` in production build.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="performance.removeConsole" />