All Features

Notice

Modern.js Builder has been rebranded as Rsbuild. This document will no longer be updated.

  • If you are using the Modern.js framework, please visit the Modern.js framework documentation directly.
  • If you are using the CLI or Node API of Modern.js Builder, you can easily migrate to Rsbuild, please visit the Rsbuild repository for more information.

Here are all the main features supported by Modern.js Builder.

JavaScript

Features Description Links
Rspack bundler Optional feature, use Rspack as the bundler
Babel compilation Babel compilation is enabled by default, which converts JavaScript and TypeScript code to backward compatible JavaScript syntax
TS compilation TS files are compiled by Babel by default, you can also use ts-loader
Type checker Runs TypeScript type checker by default
JS minification JS minification is enabled by default in production build
Polyfill injection core-js and other polyfills are injected by default
SourceMap generation High-quality SourceMap is generated by default in production build
Alias Optional feature, set import alias
Restrict importing paths Optional feature, restrict source code import paths
esbuild compilation Optional feature, transform and minify JavaScript and TypeScript code with esbuild
SWC compilation Optional feature, transform and minify JavaScript and TypeScript code with SWC
Node outputs Optional feature, support building bundles that run in Node.js environment
Web Worker outputs Optional feature, support building bundles that run in a Web Worker environment
Browserslist Optional feature, using browserslist (opens new window)to specify which browsers should be supported in your Web application.
Compatibility check Optional feature, analyze if there are incompatible advanced syntax in the outputs within the current browser scope
Environment variable Optional feature, inject environment variables or expressions into the code
Node Polyfill Optional feature, inject polyfills for Node core modules on the browser side

CSS

Features Description Links
PostCSS compilation PostCSS compilation is enabled by default, built-in autoprefixer and other plugins
Sass preprocessing Support compile Sass files by default
Less preprocessing Support compile Less files by default
Stylus preprocessing Optional feature, compile Stylus files
CSS Modules compilation Support compiling *.module.* files by default
CSS Modules type Optional feature, automatically generate type definition for CSS Modules
CSS minification CSS minification is enabled by default in production build
Extract CSS files CSS will be extracted as separate files by default
Styled Components Support styled components compilation by default
Inline CSS into JS Optional feature, inline CSS files to JavaScript files
rem unit conversion Optional feature, convert px units in CSS to rem units

HTML

Features Description Links
Set title Set HTML title tag
Set meta Set HTML meta tag
Set favicon Set favicon for page
Set app icon Set apple icon for iOS
Use EJS template engine Optional feature, use EJS template engine
Use Pug template engine Optional feature, use pug template engine
Inline JS files Optional feature, inline JS files into HTML
Inline CSS files Optional feature, inline CSS files into HTML

Development and Debugging

Features Description Links
Automatically open page Optional feature, automatically open page URL in browser when starting Dev Server
HTTPS Dev Server Optional feature, enable HTTPS Dev Server

Frontend Framework

Features Description Links
React Refresh Support React Refresh by default
SVG to React component Support to import SVG as component by default
Vue 3 SFC compilation Optional feature, enable compilation of Vue 3 SFC (Single File Components) files
Vue 3 JSX compilation Optional feature, enable compilation of Vue 3 JSX syntax

Static Assets

Features Description Links
Import image assets Support for import image assets in code
Import font assets Support for import font assets in code
Import video assets Support for import video assets in code
Import wasm assets Support for import WebAssembly assets in code
Import node addons Support for import Node.js addons in code -
Inline static assets Small assets are inlined into JS by default
Clean up static assets Automatically clean up static assets in the dist directory before each build
Copy static assets Optional feature, copy static assets to the dist directory
Generate manifest file Optional feature, generate manifest file containing static asset information

Performance

Features Description Links
Chunk Splitting A variety of chunk splitting strategies are built into Builder to automatically split the bundle into files of moderate size
Print File Size After the production build, All bundle sizes is displayed by default
Analyze bundle size Optional feature, analyze bundle size through Bundle Analyzer
Remove console Optional feature, remove console.xx in code
Optimize moment.js size Optional feature, remove the redundant locale files of moment.js
Component on-demand import Optional feature, selectively import code and styles from component libraries
Image compression Optional feature, compress used image resources
Preload Optional feature, preemptively fetch and cache the target resource for current navigation
Prefetch Optional feature, preemptively fetch and cache the target resource for a followup navigation
Preconnect Optional feature, preemptively connect to the target resource's origin
DNS prefetch Optional feature, preemptively perform DNS resolution for the target resource's origin