diff --git a/website/docs/en/guide/advanced/browser-compatibility.mdx b/website/docs/en/guide/advanced/browser-compatibility.mdx index 02dc13b603..8f4a9a67f7 100644 --- a/website/docs/en/guide/advanced/browser-compatibility.mdx +++ b/website/docs/en/guide/advanced/browser-compatibility.mdx @@ -2,20 +2,20 @@ Rsbuild supports [modern browsers](/guide/advanced/browserslist#default-browserslist) by default and provides syntax and API downgrade capabilities to ensure compatibility with legacy browsers that support ES5 (such as IE11). -This chapter introduces how to use Rsbuild's features to address browser compatibility issues. +This chapter explains how to use Rsbuild's features to address browser compatibility issues. ## Set browserslist -Before dealing with compatibility issues, you first need to determine which browsers your project needs to support and add the corresponding browserslist config. +Before dealing with compatibility issues, you need to determine which browsers your project needs to support and add the corresponding browserslist config. - If you haven't set browserslist yet, please read the [Browserslist](/guide/advanced/browserslist) chapter first. -- If you have set a browserslist, Rsbuild will automatically compile to match that scope, downgrade JavaScript and CSS syntax, and inject the required polyfills. In most cases, you can safely use modern ECMAScript features without worrying about compatibility issues. +- If you have set a browserslist, Rsbuild automatically compiles to match that scope, downgrades JavaScript and CSS syntax, and injects required polyfills. In most cases, you can safely use modern ECMAScript features without worrying about compatibility issues. -After setting the browserslist, if you still encounter compatibility issues, please continue reading the content below to find solutions. +After setting the browserslist, if you still encounter compatibility issues, continue reading to find solutions. :::tip What is polyfill -A polyfill is code that provides the functionality of newer features to older browsers that do not support them natively. It fills in the gaps in older browsers' implementations of web standards, allowing developers to use newer features without worrying about whether they will work in older browsers. For example, if a browser doesn't support the `Array.prototype.flat()` method, a polyfill can provide that functionality, allowing code that uses `Array.prototype.flat()` to work in that browser. Polyfills are commonly used to ensure web applications work across a wide range of browsers, including older ones. +A polyfill is code that provides the functionality of newer features to older browsers that don't support them natively. It fills gaps in older browsers' implementations of web standards, allowing developers to use newer features without worrying about whether they'll work in older browsers. For example, if a browser doesn't support the `Array.prototype.flat()` method, a polyfill can provide that functionality, allowing code that uses `Array.prototype.flat()` to work in that browser. Polyfills are commonly used to ensure web applications work across a wide range of browsers, including older ones. ::: ## Background knowledge @@ -24,9 +24,9 @@ Before dealing with compatibility issues, it is recommended that you understand ### Syntax downgrade and API downgrade -When you use higher-version syntax and APIs in your project, to make the compiled code run reliably in lower-version browsers, we need to downgrade two parts: syntax downgrade and API downgrade. +When you use higher-version syntax and APIs in your project, to make the compiled code run reliably in lower-version browsers, we need to downgrade two parts: syntax and APIs. -**Rsbuild downgrades syntax through syntax transpilation, and downgrades APIs through polyfill injection.** +**Rsbuild downgrades syntax through transpilation and downgrades APIs through polyfill injection.** > Syntax and APIs are not tightly coupled. When browser manufacturers implement the engine, they will support some syntax or implement some APIs in advance according to the specification or their own needs. Therefore, browsers from different manufacturers in the same period are not necessarily compatible with syntax and API. So in general practice, syntax and API are handled in two parts. @@ -61,7 +61,7 @@ SyntaxError: Unexpected token. It's obvious from the error message that this is a syntax error, meaning this syntax is not supported in older versions of the engine. -**Syntax cannot be supported by polyfill or shim**. To run syntax that's not originally supported in a lower-version browser, you need to transpile the code into syntax that the lower-version engine can support. +**Syntax cannot be supported by polyfill or shim**. To run syntax that's not originally supported in a lower-version browser, you need to transpile the code into syntax the lower-version engine can support. Transpile the above code into the following to run in older version engines: @@ -70,7 +70,7 @@ var foo = {}; foo === null || foo === void 0 ? void 0 : foo.bar(); ``` -After transpilation, the syntax of the code has changed, and some syntax that the engine of the lower version cannot understand has been replaced with the syntax it can understand, **but the meaning of the code itself has not changed**. +After transpilation, the syntax of the code has changed, and some syntax the lower-version engine cannot understand has been replaced with syntax it can understand, **but the meaning of the code itself hasn't changed**. If the engine encounters an unrecognized syntax when converting to AST, it will report a syntax error and abort code execution. In this case, if your project doesn't use capabilities such as SSR or SSG, the page will be blank, making it unavailable. diff --git a/website/docs/en/guide/advanced/env-vars.mdx b/website/docs/en/guide/advanced/env-vars.mdx index 00e11f087b..f86740c22e 100644 --- a/website/docs/en/guide/advanced/env-vars.mdx +++ b/website/docs/en/guide/advanced/env-vars.mdx @@ -1,6 +1,6 @@ # Environment variables -Rsbuild supports injecting environment variables or expressions into your code during the build. This helps you distinguish between different environments or replace constants. +Rsbuild supports injecting environment variables or expressions into your code during the build. This helps you distinguish between environments or replace constants. This chapter explains how to use environment variables in Rsbuild. @@ -84,7 +84,7 @@ if (import.meta.env.PROD) { - **Type:** `string` - **Scope:** Available in source code, replaced at build time via [define](/guide/advanced/env-vars#using-define) -You can use `import.meta.env.BASE_URL` in client code to access the [base path](/guide/basic/server#base-path) of the server. This base path is determined by the [server.base](/config/server/base) configuration and is helpful for referencing assets from the [public folder](/guide/basic/static-assets#public-folder) in your code. +You can use `import.meta.env.BASE_URL` in client code to access the [base path](/guide/basic/server#base-path) of the server. This base path is determined by the [server.base](/config/server/base) configuration and is useful for referencing assets from the [public folder](/guide/basic/static-assets#public-folder) in your code. For example, set the server's base path to `/foo` using the [server.base](/config/server/base) configuration: diff --git a/website/docs/en/guide/advanced/hmr.mdx b/website/docs/en/guide/advanced/hmr.mdx index 019983cec7..5e3b1898e6 100644 --- a/website/docs/en/guide/advanced/hmr.mdx +++ b/website/docs/en/guide/advanced/hmr.mdx @@ -1,16 +1,16 @@ # Hot module replacement -Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: +Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application runs, without a full reload. This significantly speeds up development in several ways: -- Retain application state which is lost during a full reload. -- Save valuable development time by only updating what's changed. -- Instantly update the browser when modifications are made to CSS / JS in the source code, which is almost comparable to changing styles directly in the browser's dev tools. +- Retain application state that is lost during a full reload. +- Save valuable development time by updating only what changed. +- Instantly update the browser when modifying CSS / JS in source code, almost comparable to changing styles directly in the browser's dev tools. ## HMR toggle Rsbuild has built-in support for HMR, which is enabled by default in development mode. -If you don't need HMR, set [dev.hmr](/config/dev/hmr) to `false`. This will disable HMR and React Refresh, and Rsbuild will automatically fall back to [dev.liveReload](/config/dev/live-reload). +If you don't need HMR, set [dev.hmr](/config/dev/hmr) to `false`. This disables HMR and React Refresh, and Rsbuild automatically falls back to [dev.liveReload](/config/dev/live-reload). ```ts title="rsbuild.config.ts" export default { @@ -20,7 +20,7 @@ export default { }; ``` -To disable both HMR and live reload, set both [dev.hmr](/config/dev/hmr) and [dev.liveReload](/config/dev/live-reload) to `false`. Then, no WebSocket requests will be made to the dev server from the page, and the page will not automatically refresh when files change. +To disable both HMR and live reload, set both [dev.hmr](/config/dev/hmr) and [dev.liveReload](/config/dev/live-reload) to `false`. Then, no WebSocket requests will be made from the page to the dev server, and the page won't automatically refresh when files change. ```ts title="rsbuild.config.ts" export default { @@ -35,7 +35,7 @@ export default { By default, Rsbuild uses the host and port number of the current page to construct the WebSocket URL for HMR. -When the HMR connection fails, you can specify the WebSocket URL by customizing [dev.client](/config/dev/client) config. +When the HMR connection fails, you can specify the WebSocket URL by customizing the [dev.client](/config/dev/client) config. ```ts title="rsbuild.config.ts" export default { @@ -50,7 +50,7 @@ export default { ## File watching -By default, Rsbuild does not watch files in the `.git/` and `node_modules/` directories. When files in these directories change, Rsbuild will not trigger a rebuild. This reduces memory usage and improves build performance. +By default, Rsbuild doesn't watch files in the `.git/` and `node_modules/` directories. When files in these directories change, Rsbuild won't trigger a rebuild. This reduces memory usage and improves build performance. If you want to watch these directories, you can manually configure Rspack's [watchOptions.ignored](https://rspack.rs/config/watch#watchoptionsignored) to override the default behavior. diff --git a/website/docs/en/guide/basic/html-template.mdx b/website/docs/en/guide/basic/html-template.mdx index d1158961e8..5f897dc918 100644 --- a/website/docs/en/guide/basic/html-template.mdx +++ b/website/docs/en/guide/basic/html-template.mdx @@ -51,7 +51,7 @@ In the default template, `id="<%= mountId %>"` is replaced with `id="root"`. Mod You can set the HTML `` tag through the [html.title](/config/html/title) config. -When there is only one page in your project, just use the `html.title` setting directly: +When your project has only one page, use the `html.title` setting directly: ```ts title="rsbuild.config.ts" export default { @@ -78,7 +78,7 @@ export default { ``` :::tip -For single-page applications (SPA), Rsbuild will include an initial title in the HTML page, but you usually need to dynamically update the page title on route switching, for example using some routing libraries or libraries like [React Helmet](https://github.com/nfl/react-helmet). +For single-page applications (SPA), Rsbuild includes an initial title in the HTML page, but you typically need to dynamically update the page title on route changes, for example using routing libraries or libraries like [React Helmet](https://github.com/nfl/react-helmet). ::: ## Set page icon diff --git a/website/docs/en/guide/basic/static-assets.mdx b/website/docs/en/guide/basic/static-assets.mdx index b009b90a4e..6ea90f5c67 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 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 they access the application. 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 they access the application. Because they don't change, static assets can be cached by the browser, improving application performance. ::: ## Asset formats @@ -56,7 +56,7 @@ console.log(logo); // "/static/logo.[hash].png" export default () => <img src={logo} />; ``` -When using `new URL()` to reference `.js` or `.ts` files, they are treated as URL assets and aren't processed by Rsbuild's built-in SWC loader. +When using `new URL()` to reference `.js` or `.ts` files, they're treated as URL assets and aren't processed by Rsbuild's built-in SWC loader. ```tsx // foo.ts will remain the original content and be output to the dist directory @@ -65,7 +65,7 @@ const fooTs = new URL('./foo.ts', import.meta.url).href; console.log(fooTs); // "/static/foo.[hash].ts" ``` -Similarly, when using `new URL()` to reference `.css` or `.scss` files, they are treated as URL assets and aren't processed by Rsbuild's built-in CSS loaders. +Similarly, when using `new URL()` to reference `.css` or `.scss` files, they're treated as URL assets and aren't processed by Rsbuild's built-in CSS loaders. ```tsx // foo.css will remain the original content and be output to the dist directory diff --git a/website/docs/en/guide/basic/typescript.mdx b/website/docs/en/guide/basic/typescript.mdx index 4e323081a7..b948fde776 100644 --- a/website/docs/en/guide/basic/typescript.mdx +++ b/website/docs/en/guide/basic/typescript.mdx @@ -8,7 +8,7 @@ Rsbuild uses [SWC](/guide/configuration/swc) by default for transforming TypeScr ### Isolated modules -Unlike the native TypeScript compiler, tools like SWC and Babel compile each file separately and cannot determine whether an imported name is a type or value. When using TypeScript in Rsbuild, enable the [verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) or [isolatedModules](https://typescriptlang.org/tsconfig/#isolatedModules) option in your `tsconfig.json`: +Unlike the native TypeScript compiler, tools like SWC and Babel compile each file separately and cannot determine whether an imported name is a type or value. When using TypeScript in Rsbuild, enable the [verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) or [isolatedModules](https://typescriptlang.org/tsconfig/#isolatedModules) option in `tsconfig.json`: - For TypeScript >= 5.0.0, use the `verbatimModuleSyntax` option, which enables the `isolatedModules` option by default: @@ -56,19 +56,19 @@ Create a `src/env.d.ts` file to reference these types: ## Type checking -When transpiling TypeScript code using tools like SWC and Babel, type checking is not performed. +When transpiling TypeScript code using tools like SWC and Babel, type checking isn't performed. ### Type check plugin To enable type checking, you can use the [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) plugin. This plugin runs TypeScript type checking in a separate process and internally integrates [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin). -The plugin supports type checking in both dev and build modes, helping you catch type errors early during development. +The plugin supports type checking in both dev and build modes, helping you catch type errors early in development. Refer to [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) for usage instructions. ### Using tsc -You can also use [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) directly for type checking by adding a `type-check` step to your `build` script. This approach only performs type checking after the build and does not run during dev mode. +You can also use [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) directly for type checking by adding a `type-check` step to your `build` script. This approach only performs type checking after the build and doesn't run during dev mode. ```json title="package.json" { diff --git a/website/docs/en/guide/optimization/build-performance.mdx b/website/docs/en/guide/optimization/build-performance.mdx index 4cfd5ca35b..97d59549d3 100644 --- a/website/docs/en/guide/optimization/build-performance.mdx +++ b/website/docs/en/guide/optimization/build-performance.mdx @@ -1,6 +1,6 @@ # Improve build performance -Rsbuild optimizes build performance by default, but you may encounter performance issues as your project grows. +Rsbuild optimizes build performance by default, but performance issues may arise as your project grows. This document provides optional optimization strategies to improve build performance. @@ -16,15 +16,15 @@ These general optimization methods can speed up both development and production ### Upgrade Rsbuild -Upgrading to the latest version of Rsbuild gives you access to the latest performance optimizations. See [Upgrade Rsbuild](/guide/basic/upgrade-rsbuild) for more details. +Upgrading to the latest version of Rsbuild provides access to the latest performance optimizations. See [Upgrade Rsbuild](/guide/basic/upgrade-rsbuild) for more details. ### Enable persistent cache -Rsbuild provides a [performance.buildCache](/config/performance/build-cache) configuration that can significantly improve rebuild speed. +Rsbuild provides a [performance.buildCache](/config/performance/build-cache) configuration that significantly improves rebuild speed. ### Reduce module count -Optimizing the number of modules your application uses reduces bundle size and improves build performance. Read the [Bundle Size Optimization](/guide/optimization/optimize-bundle) section to learn optimization strategies. +Optimizing the number of modules your application uses reduces bundle size and improves build performance. See [Bundle Size Optimization](/guide/optimization/optimize-bundle) to learn optimization strategies. ### Optimize Tailwind CSS @@ -34,7 +34,7 @@ See [Tailwind CSS v3 - Optimize build performance](/guide/styling/tailwindcss-v3 ### Parallel Less compilation -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. +If your project uses the [@rsbuild/plugin-less](/plugins/list/plugin-less) plugin with many Less files, you can try enabling parallel compilation to improve build performance. See [Less Plugin - parallel](/plugins/list/plugin-less#parallel) for more details. @@ -42,9 +42,9 @@ See [Less Plugin - parallel](/plugins/list/plugin-less#parallel) for more detail 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 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. +- [@rsbuild/plugin-babel](/plugins/list/plugin-babel): This plugin uses 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 performant CSS solutions instead. +- [terser-webpack-plugin](https://www.npmjs.com/package/terser-webpack-plugin): You can replace Terser with faster minimizers like Rsbuild's built-in [SWC](/guide/configuration/swc) minifier. ## Development optimization @@ -52,7 +52,7 @@ These methods improve performance in development mode. ### Enable lazy compilation -Enabling lazy compilation can significantly reduce the number of modules compiled during dev server startup and improve startup time. +Enabling lazy compilation significantly reduces the number of modules compiled during dev server startup, improving startup time. ```ts title="rsbuild.config.ts" export default { @@ -66,7 +66,7 @@ export default { ### Enable native watcher -Enabling Rspack's [native watcher](https://rspack.rs/config/experiments#experimentsnativewatcher) can improve HMR performance in development mode. +Enabling Rspack's [native watcher](https://rspack.rs/config/experiments#experimentsnativewatcher) improves HMR performance in development mode. ```ts title="rsbuild.config.ts" export default { @@ -82,7 +82,7 @@ export default { ### Source map format -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. +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 that comes with some performance overhead. You can improve build speed by adjusting the source map format through [output.sourceMap](/config/output/source-map). @@ -114,7 +114,7 @@ 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 configurations for development and production, thereby reducing compilation overhead in development. +This strategy is similar to ["Adjust Browserslist"](/guide/optimization/optimize-bundle#adjust-browserslist), except you can set different browserslist configurations for development and production, reducing compilation overhead in development. 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: diff --git a/website/docs/en/guide/optimization/code-splitting.mdx b/website/docs/en/guide/optimization/code-splitting.mdx index f5d8b34e9c..26693c2401 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 important for improving application loading performance. It leverages browser caching to reduce the number of requests and improve loading speed. +A good chunk splitting strategy is important for improving application load performance. It leverages browser caching to reduce requests and improve loading speed. -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. +Several [chunk splitting strategies](/guide/optimization/code-splitting) are built into Rsbuild to meet the needs of most applications. You can also customize chunk splitting configuration for specific use cases. > See [Rspack - Code Splitting](https://rspack.rs/guide/optimization/code-splitting) for more details. @@ -27,14 +27,14 @@ When using strategies other than `all-in-one`, Rspack's default splitting rules ### Behavior -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: +Rsbuild uses the `split-by-experience` strategy by default, an optimization strategy based on practical experience. When your application uses the following npm packages, they're automatically split into separate chunks: - `lib-polyfill.js`: Contains `core-js`, `@swc/helpers`, `tslib` - `lib-axios.js`: Contains `axios` - `lib-react.js`: Provided by [@rsbuild/plugin-react](/plugins/list/plugin-react#splitchunks) - `lib-vue.js`: Provided by [@rsbuild/plugin-vue](/plugins/list/plugin-vue#splitchunks) -This approach groups commonly used packages and splits them into individual chunks, which helps improve browser caching efficiency. +This approach groups commonly used packages and splits them into individual chunks, improving browser caching efficiency. ### Config @@ -50,7 +50,7 @@ export default { ### Notes -If the npm packages mentioned above are not installed or used, the corresponding chunks will not be generated. +If the npm packages mentioned above aren't installed or used, the corresponding chunks won't be generated. ## split-by-module @@ -76,9 +76,9 @@ export default { ### Notes -- This configuration splits node_modules into many smaller chunks, resulting in numerous file requests. -- With HTTP/2, resource loading is accelerated and cache hit rates improve due to multiplexing. -- Without HTTP/2, page loading performance may degrade due to HTTP head-of-line blocking. Use cautiously. +- This configuration splits node_modules into many smaller chunks, resulting in many file requests. +- With HTTP/2, resource loading accelerates and cache hit rates improve due to multiplexing. +- Without HTTP/2, page loading performance may degrade due to HTTP head-of-line blocking. Use with caution. ## all-in-one diff --git a/website/docs/en/guide/optimization/optimize-bundle.mdx b/website/docs/en/guide/optimization/optimize-bundle.mdx index 6dd3a5dc5b..bc49066822 100644 --- a/website/docs/en/guide/optimization/optimize-bundle.mdx +++ b/website/docs/en/guide/optimization/optimize-bundle.mdx @@ -1,10 +1,10 @@ # Bundle size optimization -Bundle size optimization is an important part of production builds because it directly affects the user experience. This document introduces common bundle size optimization methods in Rsbuild. +Bundle size optimization is important for production builds because it directly affects user experience. This document covers common bundle size optimization methods in Rsbuild. ## Reduce duplicate dependencies -It is common for web projects to bundle multiple versions of third-party dependencies. Duplicate dependencies can lead to increased bundle size and slower build speed. +Web applications commonly bundle multiple versions of third-party dependencies. Duplicate dependencies increase bundle size and slow down builds. ### Detect duplicate dependencies @@ -18,7 +18,7 @@ For more details, see [Rsdoctor - Duplicate Dependency Problem](https://rsdoctor You can eliminate duplicate dependencies using your package manager. -- Rsbuild provides the [resolve.dedupe](/config/resolve/dedupe) config, which allows you to force the specified packages to be resolved from the project root directory, thereby removing duplicate packages. +- Rsbuild provides the [resolve.dedupe](/config/resolve/dedupe) config, which forces specified packages to resolve from the project root directory, removing duplicate packages. - If you are using `pnpm >= 7.26.0`, you can use the [pnpm dedupe](https://pnpm.io/cli/dedupe) command to upgrade and eliminate duplicate dependencies. @@ -26,13 +26,13 @@ You can eliminate duplicate dependencies using your package manager. pnpm dedupe ``` -- If you are using `pnpm < 7.26.0`, you can use [pnpm-deduplicate](https://github.com/ocavue/pnpm-deduplicate) to analyze all duplicate dependencies, then update dependencies or declare [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) to merge duplicated dependencies. +- If you are using `pnpm < 7.26.0`, you can use [pnpm-deduplicate](https://github.com/ocavue/pnpm-deduplicate) to analyze duplicate dependencies, then update dependencies or declare [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) to merge them. ```bash npx pnpm-deduplicate --list ``` -- If you are using `yarn`, you can use [yarn-deduplicate](https://github.com/scinos/yarn-deduplicate) to automatically merge duplicated dependencies: +- If you are using `yarn`, you can use [yarn-deduplicate](https://github.com/scinos/yarn-deduplicate) to automatically merge duplicate dependencies: ```bash npx yarn-deduplicate && yarn @@ -42,7 +42,7 @@ npx yarn-deduplicate && yarn We recommend using lightweight libraries in your project, such as replacing [moment](https://momentjs.com/) with [day.js](https://day.js.org/). -To find out the large libraries in the project, add the `BUNDLE_ANALYZE=true` environment variable when building: +To identify large libraries in your project, add the `BUNDLE_ANALYZE=true` environment variable when building: ```bash BUNDLE_ANALYZE=true pnpm build @@ -52,7 +52,7 @@ See the [performance.bundleAnalyze](/config/performance/bundle-analyze) configur ## Adjust browserslist -Rsbuild will compile the code based on the project's browserslist config and inject some polyfills. If your project doesn't need to support legacy browsers, you can adjust the browserslist to drop support for older browsers, reducing the compilation overhead for syntax transformation and polyfills. +Rsbuild compiles code based on your project's browserslist config and injects polyfills. If your project doesn't need to support legacy browsers, adjust the browserslist to drop support for older browsers, reducing compilation overhead for syntax transformation and polyfills. Rsbuild's default Browserslist config is: @@ -70,11 +70,11 @@ For example, if you only need to be compatible with browsers above Chrome 100, y Please read the [Browserslist](/guide/advanced/browserslist) chapter to know more about the usage of Browserslist. ::: -## Usage polyfill +## Use polyfill on demand -If the current project's [output.polyfill](/config/output/polyfill) is set to `'entry'`, and you are certain that third-party dependencies do not require additional polyfills, you can change it to `usage`. +If your project's [output.polyfill](/config/output/polyfill) is set to `'entry'` and you're certain that third-party dependencies don't require additional polyfills, change it to `usage`. -In `usage` mode, Rsbuild analyzes the syntax used in the source code and injects the required polyfill code on demand to reduce the size of polyfill. +In `usage` mode, Rsbuild analyzes the syntax in source code and injects only the required polyfills, reducing polyfill size. ```js export default { @@ -90,7 +90,7 @@ Please read the [Browser Compatibility](/guide/advanced/browser-compatibility) c ## Image compression -In typical front-end projects, images often account for a large proportion of the total bundle size. Reducing image size can significantly improve bundle size. You can enable image compression by registering a plugin in Rsbuild: +In typical front-end projects, images often account for a large portion of total bundle size. Reducing image size significantly improves overall bundle size. Enable image compression by registering a plugin in Rsbuild: ```ts title="rsbuild.config.ts" import { pluginImageCompress } from '@rsbuild/plugin-image-compress'; diff --git a/website/docs/en/guide/start/quick-start.mdx b/website/docs/en/guide/start/quick-start.mdx index 24ede8831c..254d63899a 100644 --- a/website/docs/en/guide/start/quick-start.mdx +++ b/website/docs/en/guide/start/quick-start.mdx @@ -2,7 +2,7 @@ ## Online examples -We provide online examples based on Rsbuild. These examples give you an intuitive sense of Rspack's build performance and the Rsbuild development experience: +We provide online examples based on Rsbuild. These examples demonstrate Rspack's build performance and the Rsbuild development experience: - [StackBlitz example](https://stackblitz.com/~/github.com/rspack-contrib/rsbuild-stackblitz-example) - [CodeSandbox example](https://codesandbox.io/p/github/rspack-contrib/rsbuild-codesandbox-example) @@ -39,9 +39,9 @@ import { PackageManagerTabs } from '@theme'; }} /> -Follow the prompts step by step. During setup, you can choose whether to add optional tools like TypeScript and ESLint. +Follow the prompts. During setup, you can choose whether to add optional tools like TypeScript and ESLint. -After creating the application, run these commands: +After creating the application: - Run `git init` to initialize a Git repository. - Run `npm install` (or your package manager's install command) to install npm dependencies. @@ -63,7 +63,7 @@ When creating an application, you can choose from the following templates provid | svelte | [Svelte 5](https://svelte.dev/) | TypeScript | | solid | [Solid](https://solidjs.com/) | TypeScript | -`create-rsbuild` provides basic templates out of the box. You can also get more templates in the following ways: +`create-rsbuild` provides basic templates. You can find more templates through: - Visit [Rspack - Ecosystem](https://rspack.rs/guide/start/quick-start#ecosystem) to learn about various higher-level tools based on Rsbuild. - Visit [awesome-rstack - Starter](https://github.com/web-infra-dev/awesome-rstack?tab=readme-ov-file#starter) to find more community-maintained templates.