diff --git a/scripts/dictionary.txt b/scripts/dictionary.txt index f752633dcf..971ded8dc2 100644 --- a/scripts/dictionary.txt +++ b/scripts/dictionary.txt @@ -47,6 +47,7 @@ icss idents iife imagex +inlines jfif jiti jridgewell diff --git a/website/docs/en/config/output/data-uri-limit.mdx b/website/docs/en/config/output/data-uri-limit.mdx index d81c0fa3f9..f2ac8eb3b6 100644 --- a/website/docs/en/config/output/data-uri-limit.mdx +++ b/website/docs/en/config/output/data-uri-limit.mdx @@ -28,9 +28,9 @@ const defaultDatUriLimit = { Set the size threshold to inline static assets such as images and fonts. -By default, static assets will be Base64 encoded and inline into the page if the size is less than 4KiB. +By default, static assets will be Base64 encoded and inlined into the page if they are smaller than 4KiB. -You can adjust the threshold by setting the `dataUriLimit` config. +You can adjust this threshold by setting the `dataUriLimit` config. Details: @@ -74,7 +74,7 @@ export default { }; ``` -- Set the threshold for image assets to 5KiB, do not inline video assets: +- Set the threshold for image assets to 5KiB and do not inline video assets: ```js export default { diff --git a/website/docs/en/config/server/proxy.mdx b/website/docs/en/config/server/proxy.mdx index 0a80396774..03a0e46bd9 100644 --- a/website/docs/en/config/server/proxy.mdx +++ b/website/docs/en/config/server/proxy.mdx @@ -66,7 +66,7 @@ export default { ### Proxy WebSocket -To proxy WebSocket requests, you can enable it through set `ws` to `true`: +To proxy WebSocket requests, set `ws` to `true`: ```js export default { @@ -83,7 +83,7 @@ export default { ## Options -The Rsbuild server proxy makes use of the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware/tree/2.x) package. Check out its documentation for more advanced usages. +The Rsbuild server proxy uses the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware/tree/2.x) package. Check out its documentation for more advanced usage. The full type definition of Rsbuild server proxy is: @@ -108,13 +108,13 @@ type ProxyConfig = | Record; ``` -In addition to the `http-proxy-middleware` option, Rsbuild also support the `bypass` and `context` options. +In addition to the `http-proxy-middleware` options, Rsbuild also supports the `bypass` and `context` options. ### bypass -Sometimes you do not want to proxy everything. It is possible to bypass the proxy based on the return value of a `bypass` function. +Sometimes you don't want to proxy everything. You can bypass the proxy based on the return value of a `bypass` function. -In the function, you get access to the request, response, and proxy options. +In the function, you have access to the request, response, and proxy options. - Return `null` or `undefined` to continue processing the request with proxy. - Return `true` to continue processing the request without proxy. @@ -122,7 +122,7 @@ In the function, you get access to the request, response, and proxy options. - Return a path to serve from, instead of continuing to proxy the request. - Return a Promise to handle the request asynchronously. -For example, for a browser request, you want to serve an HTML page, but for an API request, you want to proxy it. You could configure like this: +For example, for a browser request, you want to serve an HTML page, but for an API request, you want to proxy it. You could configure it like this: ```ts title="rsbuild.config.ts" export default { diff --git a/website/docs/en/guide/advanced/env-vars.mdx b/website/docs/en/guide/advanced/env-vars.mdx index 69e96a8882..9612dc7208 100644 --- a/website/docs/en/guide/advanced/env-vars.mdx +++ b/website/docs/en/guide/advanced/env-vars.mdx @@ -1,12 +1,12 @@ # Environment variables -Rsbuild supports injecting environment variables or expressions into your code during build, which helps distinguish the running environment or replace constants. +Rsbuild supports injecting environment variables or expressions into your code during the build, which helps distinguish the running environment or replace constants. This chapter explains how to use environment variables in Rsbuild. ## Default variables -Rsbuild injects some environment variables into your code by default using [source.define](#using-define). These are replaced with specified values during build: +Rsbuild injects some environment variables into your code by default using [source.define](#using-define). These are replaced with specified values during the build: `import.meta.env` contains these environment variables: diff --git a/website/docs/en/guide/basic/cli.mdx b/website/docs/en/guide/basic/cli.mdx index 9860122493..f9c2f2d496 100644 --- a/website/docs/en/guide/basic/cli.mdx +++ b/website/docs/en/guide/basic/cli.mdx @@ -54,7 +54,7 @@ Options: --host Set the host that the server listens to ``` -Start the dev server by running `rsbuild` directly, which is equivalent to `rsbuild dev`: +Start the dev server by running `rsbuild` directly (equivalent to `rsbuild dev`): ```bash npx rsbuild @@ -62,7 +62,7 @@ npx rsbuild ### Opening page -The `--open` option automatically opens a page when starting the dev server, equivalent to setting [server.open](/config/server/open) to `true`. +The `--open` option automatically opens a page when starting the dev server (equivalent to setting [server.open](/config/server/open) to `true`). ```bash rsbuild dev --open @@ -81,7 +81,7 @@ rsbuild dev -o ``` :::tip -When using [server.open](/config/server/open) and `--open` at the same time, `--open` takes precedence. +When using both [server.open](/config/server/open) and `--open`, the `--open` option takes precedence. ::: ## rsbuild build @@ -97,7 +97,7 @@ Options: ## rsbuild preview -The `rsbuild preview` command previews production build outputs locally. Run `rsbuild build` first to generate the build outputs. +The `rsbuild preview` command previews production build outputs locally. You must run `rsbuild build` first to generate the build outputs. ```bash Usage: rsbuild preview [options] @@ -140,7 +140,7 @@ config inspection completed, generated files: ### Setting mode -By default, the inspect command outputs the configuration for the development mode. You can add the `--mode production` option to output the configuration for the production mode: +By default, the inspect command outputs configuration for development mode. Add the `--mode production` option to output production mode configuration: ```bash rsbuild inspect --mode production @@ -148,7 +148,7 @@ rsbuild inspect --mode production ### Verbose content -By default, the inspect command omits the content of functions in the configuration object. You can add the `--verbose` option to output the complete content of functions: +By default, the inspect command omits function content in the configuration object. Add the `--verbose` option to output complete function content: ```bash rsbuild inspect --verbose @@ -156,7 +156,7 @@ rsbuild inspect --verbose ### Multiple targets -If the current project has multiple build targets, such as building browser bundles and Node.js bundles simultaneously, multiple Rspack configuration files will be generated in the `dist/.rsbuild` directory. +If the current project has multiple build targets (such as building both browser and Node.js bundles), multiple Rspack configuration files will be generated in the `dist/.rsbuild` directory. ```bash ➜ npx rsbuild inspect diff --git a/website/docs/en/guide/basic/output-files.mdx b/website/docs/en/guide/basic/output-files.mdx index 108de77d34..78c1e23de8 100644 --- a/website/docs/en/guide/basic/output-files.mdx +++ b/website/docs/en/guide/basic/output-files.mdx @@ -6,7 +6,7 @@ To learn about deploying Rsbuild build outputs as a static site, see [Deploy Sta ## Default directory structure -The default output directory structure is shown below. Output files are written to the `dist` directory in your project root. +The default output directory structure is shown below. Output files are written to the `dist` directory at your project root. ```bash dist @@ -38,9 +38,9 @@ In the filename, `[name]` represents the entry name for this file, such as `inde ## Development mode output -In development mode, Rsbuild stores build outputs in memory on the dev server by default instead of writing them to disk. This reduces file system overhead. Refer to [View Static Assets](/guide/basic/server#view-static-assets) to see all static assets generated in the current build. +In development mode, Rsbuild stores build outputs in memory on the dev server by default instead of writing them to disk. This reduces file system overhead. See [View Static Assets](/guide/basic/server#view-static-assets) to view all static assets generated in the current build. -To write output files to disk, which is useful for inspecting build artifacts or configuring proxy rules for static assets, set [dev.writeToDisk](/config/dev/write-to-disk) to `true`: +To write output files to disk (useful for inspecting build artifacts or configuring proxy rules), set [dev.writeToDisk](/config/dev/write-to-disk) to `true`: ```ts export default { @@ -116,7 +116,7 @@ dist └── [name].js ``` -Node.js outputs typically contain only JS files without HTML or CSS. JS filenames do not include hash values. +Node.js outputs typically contain only JS files, without HTML or CSS. JS filenames do not include hash values. You can modify the output path for Node.js files using the [environments](/config/environments) configuration. @@ -144,7 +144,7 @@ export default { ## Flatten directories -To create a flatter directory structure, set any directory path to an empty string to flatten the output structure. +To create a flatter directory structure, set any directory path to an empty string. For example: diff --git a/website/docs/en/guide/basic/server.mdx b/website/docs/en/guide/basic/server.mdx index 030bbe21a7..dd240f39dc 100644 --- a/website/docs/en/guide/basic/server.mdx +++ b/website/docs/en/guide/basic/server.mdx @@ -6,7 +6,7 @@ Rsbuild includes a built-in dev server designed to improve the development exper By default, the Rsbuild server's base path is `/`. Access output files like `index.html` and [public folder](/guide/basic/static-assets#public-folder) assets at `http://localhost:3000/`. -Modify the server's base path using [server.base](/config/server/base). To access files at `http://localhost:3000/foo/`, configure: +Modify the server's base path using [server.base](/config/server/base). To access files at `http://localhost:3000/foo/`, configure as follows: ```ts title="rsbuild.config.ts" export default { @@ -36,9 +36,9 @@ The Rsbuild server provides default routing conventions and allows customization The Rsbuild server generates page routes based on the [server.base](/config/server/base) and [source.entry](/config/source/entry) configurations. -When entry is `index`, the page can be accessed via `/`; when entry is `foo`, the page can be accessed via `/foo`. +When the entry is `index`, the page can be accessed via `/`; when the entry is `foo`, the page can be accessed via `/foo`. -When `server.base` is `/base`, the index page can be accessed via `/base` and the foo page can be accessed via `/base/foo`. +When `server.base` is `/base`, the index page can be accessed via `/base` and the foo page via `/base/foo`. ```ts title="rsbuild.config.ts" export default { @@ -68,7 +68,7 @@ export default { ### Custom fallback behavior -If Rsbuild's default [server.htmlFallback](/config/server/html-fallback) configuration does not meet your needs, for example, if you want to access `main.html` when accessing `/`, you can configure it using [server.historyApiFallback](/config/server/history-api-fallback). +If Rsbuild's default [server.htmlFallback](/config/server/html-fallback) configuration doesn't meet your needs (for example, if you want to access `main.html` when accessing `/`), you can configure it using [server.historyApiFallback](/config/server/history-api-fallback). ```ts title="rsbuild.config.ts" export default { diff --git a/website/docs/en/guide/basic/static-assets.mdx b/website/docs/en/guide/basic/static-assets.mdx index 725365b748..ddaf0784a9 100644 --- a/website/docs/en/guide/basic/static-assets.mdx +++ b/website/docs/en/guide/basic/static-assets.mdx @@ -3,7 +3,7 @@ Rsbuild supports importing static assets, including images, fonts, audio, and video. :::tip What are static assets -Static assets are files that are part of a web application and do not change during application use. Examples include images, fonts, media files, stylesheets, and JavaScript files. These assets are typically stored on a web server or CDN and delivered to the user's browser when the application is accessed. Since they don't change, static assets can be cached by the browser, improving application performance. +Static assets are files that are part of a web application and don't change during use. Examples include images, fonts, media files, stylesheets, and JavaScript files. These assets are typically stored on a web server or CDN and delivered to the user's browser when accessing the application. Since they don't change, static assets can be cached by the browser, improving application performance. ::: ## Asset formats diff --git a/website/docs/en/guide/optimization/build-performance.mdx b/website/docs/en/guide/optimization/build-performance.mdx index a614717ba0..435d7abeee 100644 --- a/website/docs/en/guide/optimization/build-performance.mdx +++ b/website/docs/en/guide/optimization/build-performance.mdx @@ -1,14 +1,14 @@ # Improve build performance -Rsbuild optimizes build performance by default, but as projects become larger, you may encounter build performance issues. +Rsbuild optimizes build performance by default, but you may encounter performance issues as your project grows larger. This document provides optional optimization methods to improve build performance. ## Performance profiling -Performing performance analysis can help identify performance bottlenecks in your project, enabling targeted optimization. +Performance profiling helps identify bottlenecks in your project, enabling targeted optimization. -Please refer to the [Build Performance Analysis](/guide/debug/build-profiling) section for more information. +Please refer to the [Build Performance Analysis](/guide/debug/build-profiling) section. ## General optimization @@ -20,35 +20,35 @@ Upgrading to the latest version of Rsbuild provides the latest performance optim ### Enable persistent cache -Rsbuild provides [performance.buildCache](/config/performance/build-cache) configuration, which significantly improves rebuild speed. +Rsbuild provides [performance.buildCache](/config/performance/build-cache) configuration to significantly improve rebuild speed. -### Reducing modules +### Reduce module count Optimizing the number of modules referenced by the application reduces bundle size and improves build performance. Read the [Bundle Size Optimization](/guide/optimization/optimize-bundle) section to learn optimization methods. ### Optimize Tailwind CSS -When using Tailwind CSS v3, if the `content` field in `tailwind.config.js` is not correctly configured, this can lead to poor build performance and HMR performance. +When using Tailwind CSS v3, incorrectly configuring the `content` field in `tailwind.config.js` can lead to poor build and HMR performance. Refer to [Tailwind CSS v3 - Optimize build performance](/guide/styling/tailwindcss-v3#optimize-build-performance) for more details. ### Parallel Less compilation -If your project uses the [@rsbuild/plugin-less](/plugins/list/plugin-less) plugin and contains a large number of Less files, you can try enabling parallel compilation to improve build performance. +If your project uses the [@rsbuild/plugin-less](/plugins/list/plugin-less) plugin with a large number of Less files, you can try enabling parallel compilation to improve build performance. Refer to [Less Plugin - parallel](/plugins/list/plugin-less#parallel) for more details. ### Tool selection -While Rsbuild delivers excellent build performance out of the box, certain JavaScript-based tools can negatively impact overall build performance, particularly in large-scale projects. +While Rsbuild delivers excellent build performance out of the box, certain JavaScript-based tools can negatively impact performance, particularly in large projects. - [@rsbuild/plugin-babel](/plugins/list/plugin-babel): This plugin is based on Babel. We recommend using the more performant [SWC](/guide/configuration/swc) for code transformation instead. -- [@rsbuild/plugin-less](/plugins/list/plugin-less): The Less compiler has relatively poor performance. Consider using [@rsbuild/plugin-sass](/plugins/list/plugin-sass) or other high-performance CSS solutions as alternatives. +- [@rsbuild/plugin-less](/plugins/list/plugin-less): The Less compiler has relatively poor performance. Consider using [@rsbuild/plugin-sass](/plugins/list/plugin-sass) or other performant CSS solutions as alternatives. - [terser-webpack-plugin](https://www.npmjs.com/package/terser-webpack-plugin): You can replace Terser with faster minimizers, such as Rsbuild's built-in [SWC](/guide/configuration/swc) minifier. ## Development optimization -These methods improve performance specifically in development mode. +These methods improve performance in development mode. ### Enable lazy compilation @@ -82,11 +82,11 @@ export default { ### Source map format -In order to provide a good debugging experience, Rsbuild uses the `cheap-module-source-map` format source map by default in development mode, which is a high-quality source map format and will bring certain performance overhead. +To provide a good debugging experience, Rsbuild uses the `cheap-module-source-map` format in development mode by default. This is a high-quality source map format with some performance overhead. -You can improve build speed by adjusting the source map format in development mode through [output.sourceMap](/config/output/source-map). +You can improve build speed by adjusting the source map format through [output.sourceMap](/config/output/source-map). -For example to disable source map: +For example, to disable source maps: ```ts title="rsbuild.config.ts" export default { @@ -98,7 +98,7 @@ export default { }; ``` -Or set the source map format of the development mode to the cheapest `eval` format: +Or set the source map format to the fastest `eval` format in development mode: ```ts title="rsbuild.config.ts" export default { @@ -114,9 +114,9 @@ export default { ### Browserslist for development -This strategy is similar to ["Adjust Browserslist"](/guide/optimization/optimize-bundle#adjust-browserslist), the difference is that we can set different browserslist for development and production mode, thereby reducing the compilation overhead in development mode. +This strategy is similar to ["Adjust Browserslist"](/guide/optimization/optimize-bundle#adjust-browserslist). The difference is that we can set different browserslist configurations for development and production, thereby reducing compilation overhead in development. -For example, you can add the following config to `.browserslistrc`, which means that only the latest browsers are compatible in development mode, and the actual browsers are compatible in the production mode: +For example, you can add the following config to `.browserslistrc` to target only the latest browsers in development while supporting a broader range in production: ```yaml title=".browserslistrc" [production] @@ -131,4 +131,4 @@ last 1 firefox version last 1 safari version ``` -Note that this can lead to some differences in the build result between development and production modes. +Note that this can lead to differences in build output between development and production modes. diff --git a/website/docs/en/guide/optimization/code-splitting.mdx b/website/docs/en/guide/optimization/code-splitting.mdx index ca46173e6a..101f1c8e78 100644 --- a/website/docs/en/guide/optimization/code-splitting.mdx +++ b/website/docs/en/guide/optimization/code-splitting.mdx @@ -1,8 +1,8 @@ # Code splitting -A good chunk splitting strategy is very important for improving the loading performance of applications. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of applications. +A good chunk splitting strategy is important for improving application loading performance. It can leverage browser caching to reduce requests and improve loading speed. -Several [chunk splitting strategies](/guide/optimization/code-splitting) are built into Rsbuild. These should meet the needs of most applications. You can also customize the chunk splitting configuration to suit your specific use case. +Several [chunk splitting strategies](/guide/optimization/code-splitting) are built into Rsbuild to meet the needs of most applications. You can also customize the chunk splitting configuration for specific use cases. > See [Rspack - Code Splitting](https://rspack.rs/guide/optimization/code-splitting) for more details. @@ -27,7 +27,7 @@ When using strategies other than `all-in-one`, Rspack's default splitting rules ### Behavior -Rsbuild uses the `split-by-experience` strategy by default, which is an optimization strategy based on practical experience. When the following npm packages are referenced in the project, they will be automatically split into separate chunks: +Rsbuild uses the `split-by-experience` strategy by default, an optimization strategy based on practical experience. When the following npm packages are used in your application, they are automatically split into separate chunks: - `lib-polyfill.js`: Contains `core-js`, `@swc/helpers`, `tslib` - `lib-axios.js`: Contains `axios` @@ -50,16 +50,16 @@ export default { ### Notes -- If the npm packages mentioned above are not installed or used in the project, the corresponding chunk will not be generated. +If the npm packages mentioned above are not installed or used, the corresponding chunks will not be generated. ## split-by-module ### Behavior -Split each NPM package into a Chunk. +Split each npm package into a separate chunk. ::: warning -This strategy will split the node_modules in the most granular way, and at the same time, under HTTP/2, multiplexing will speed up the loading time of resources.However, in non-HTTP/2 environments, it needs to be used with caution because of HTTP head-of-line blocking problem. +This strategy splits node_modules with the finest granularity. Under HTTP/2, multiplexing can speed up resource loading. However, in non-HTTP/2 environments, use this strategy with caution due to HTTP head-of-line blocking. ::: ### Config @@ -76,15 +76,15 @@ export default { ### Notes -- This configuration will split the node_modules into smaller chunks, resulting in a large number of file requests. -- When using HTTP/2, resource loading time will be accelerated and cache hit rate will be improved due to multiplexing. -- When not using HTTP/2, the performance of page loading may be reduced due to HTTP head-of-line blocking. Please use with caution. +- This configuration splits node_modules into many smaller chunks, resulting in a large number of file requests. +- With HTTP/2, resource loading is accelerated and cache hit rates improve due to multiplexing. +- Without HTTP/2, page loading performance may decrease due to HTTP head-of-line blocking. Use with caution. ## all-in-one ### Behavior -This strategy puts all source code and third-party dependencies in the same Chunk. +This strategy puts all source code and third-party dependencies in a single chunk. ### Config @@ -100,10 +100,10 @@ export default { ### Notes -- This configuration will bundle all the generated JS code into one file (except for dynamically imported chunks). -- The size of a single JS file may be very large, leading to a decrease in page loading performance. +- This configuration bundles all generated JS code into a single file (except dynamically imported chunks). +- The single JS file may be very large, potentially reducing page loading performance. -If you need to bundle the chunks split by dynamic import into the single file, you can set the [output.asyncChunks](https://rspack.rs/config/output#outputasyncchunks) option in Rspack to `false`: +To also bundle dynamically imported chunks into a single file, set the [output.asyncChunks](https://rspack.rs/config/output#outputasyncchunks) option in Rspack to `false`: ```js export default defineConfig({ @@ -126,7 +126,7 @@ export default defineConfig({ ### Behavior -This strategy puts third-party dependencies in one Chunk, and source code in another chunk. +This strategy puts third-party dependencies in one chunk and source code in another. ### Config @@ -142,13 +142,13 @@ export default { ### Notes -- The size of a single vendor file may be very large, leading to a decrease in page loading performance. +The single vendor file may be very large, potentially reducing page loading performance. ## split-by-size ### Behavior -Under this strategy, after setting `minSize`, `maxSize` to a fixed value, Rsbuild will automatically split them without extra config. +With this strategy, after setting `minSize` and `maxSize` to fixed values, Rsbuild will automatically split chunks without extra configuration. ### Config @@ -166,16 +166,16 @@ export default { ## Custom splitting strategy -In addition to using the built-in strategies, you can also customize the splitting strategy to meet more customization needs. Custom strategy is divided into two parts: +In addition to built-in strategies, you can also customize the splitting strategy for more specific needs. Custom strategies have two parts: - Custom group - Custom Rspack `splitChunks` config -It is worth noting that these two custom capabilities can be used together with the built-in strategy; you can use the built-in strategy to split commonly used packages, and then use the custom function to split other packages. +Note that these custom capabilities can be used together with built-in strategies; you can use built-in strategies to split common packages and custom functions to split other packages. ### Custom group -Rsbuild supports custom group, which is more flexible than the built-in strategies, and simpler than writing Rspack's `splitChunks` config. +Rsbuild supports custom groups, which are more flexible than built-in strategies and simpler than writing Rspack's `splitChunks` config. For example, split the `axios` library under node_modules into `axios.js`: @@ -191,17 +191,17 @@ export default { }; ``` -Through `forceSplitting` config, you can easily split some packages into a Chunk. +Through `forceSplitting` config, you can easily split packages into chunks. #### Notes -Chunks split using the `forceSplitting` configuration will be inserted into the HTML file as resources requested for the initial screen using `