# All Features

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

## JavaScript

| Features                 | Description                                                                                                                     | Links                                                                                                                                                                                                                            |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Babel compilation        | Babel compilation is enabled by default, which converts JavaScript and TypeScript code to backward compatible JavaScript syntax | <ul><li>[tools.babel](/en/api/config-tools.html#toolsbabel)</li></ul>                                                                                                                                                            |
| TS compilation           | TS files are compiled by Babel by default, you can also use `ts-loader`                                                         | <ul><li>[TypeScript compilation](/en/guide/basic/typescript.html#typescript-compilation)</li><li>[tools.babel](/en/api/config-tools.html#toolsbabel)</li><li>[tools.tsLoader](/en/api/config-tools.html#toolstsloader)</li></ul> |
| Type Checker             | Runs TypeScript type checker by default                                                                                         | <ul><li>[Type checking](/en/guide/basic/typescript.html#type-checking)</li><li>[tools.tsChecker](/en/api/config-tools.html#toolstschecker)</li></ul>                                                                             |
| JS minification          | JS minification is enabled by default in production build                                                                       | <ul><li>[tools.terser](/en/api/config-tools.html#toolsterser)</li></ul>                                                                                                                                                          |
| Polyfill injection       | core-js and other polyfills are injected by default                                                                             | <ul><li>[Browser Compatibility](/guide/advanced/browser-compatibility.html)</li><li>[output.polyfill](/en/api/config-output.html#outputpolyfill)</li></ul>                                                                       |
| SourceMap generation     | High-quality SourceMap is generated by default in production build                                                              | <ul><li>[output.disableSourceMap](/en/api/config-output.html#outputdisablesourcemap)</li></ul>                                                                                                                                   |
| Alias                    | Optional feature, set import alias                                                                                              | <ul><li>[source.alias](/en/api/config-source.html#sourcealias)</li></ul>                                                                                                                                                         |
| Restrict importing paths | Optional feature, restrict source code import paths                                                                             | <ul><li>[source.moduleScopes](/en/api/config-source.html#sourcemodulescopes)</li></ul>                                                                                                                                           |
| esbuild compilation      | Optional feature, transform and minify JavaScript and TypeScript code with esbuild                                              | <ul><li>[esbuild plugin](/plugins/plugin-esbuild.html)</li></ul>                                                                                                                                                                 |
| SWC Compilation          | Optional feature, transform and minify JavaScript and TypeScript code with SWC                                                  | <ul><li>[SWC plugin](/plugins/plugin-swc.html)</li></ul>                                                                                                                                                                         |
| Node artifacts           | Optional feature, support building bundles that run in Node.js environment                                                      | <ul><li>[Node Target](/en/guide/basic/build-target.html#node-target)</li></ul>                                                                                                                                                   |
| Web Worker artifacts     | Optional feature, support building bundles that run in a Web Worker environment                                                 | <ul><li>[Web Worker Target](/en/guide/basic/build-target.html#web-worker-target)</li></ul>                                                                                                                                       |
| Browserslist             | Optional feature, using browserslist (opens new window)to specify which browsers should be supported in your Web application.   | <ul><li>[Browserslist](/guide/advanced/browserslist.html)</li></ul>                                                                                                                                                              |

## CSS

| Features                | Description                                                                        | Links                                                                                                                                                                                                 |
| ----------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| PostCSS compilation     | PostCSS compilation is enabled by default, built-in autoprefixer and other plugins | <ul><li>[CSS Usage](/guide/basic/css-usage.html)</li><li>[tools.postcss](/en/api/config-tools.html#toolspostcss)</li><li> [tools.autoprefixer](/en/api/config-tools.html#toolsautoprefixer)</li></ul> |
| Sass preprocessing      | Support compile Sass files by default                                              | <ul><li>[CSS Usage](/guide/basic/css-usage.html)</li><li>[tools.sass](/en/api/config-tools.html#toolssass)</li> </ul>                                                                                 |
| Less preprocessing      | Support compile Less files by default                                              | <ul><li>[CSS Usage](/guide/basic/css-usage.html)</li><li>[tools.less](/en/api/config-tools.html#toolsless)</li></ul>                                                                                  |
| Stylus preprocessing    | Optional feature, compile Stylus files                                             | <ul><li>[Stylus Plugin](/plugins/plugin-stylus.html)</li></ul>                                                                                                                                        |
| CSS Modules Compilation | Support compiling `*.module.*` files by default                                    | <ul><li>[Use CSS Modules](/guide/basic/css-modules.html)</li><li>[tools.cssLoader](/en/api/config-tools.html#toolscssloader)</li></ul>                                                                |
| CSS Modules Type        | Optional feature, automatically generate type definition for CSS Modules           | <ul><li>[Use CSS Modules](/guide/basic/css-modules.html)</li><li>[enableCssModuleTSDeclaration](/en/api/config-output.html#outputenablecssmoduletsdeclaration)</li></ul>                              |
| CSS minification        | CSS minification is enabled by default in production build                         | <ul><li>[CSS Usage](/guide/basic/css-usage.html)</li><li>[tools.minifyCss](/en/api/config-tools.html#toolsminifycss)</li></ul>                                                                        |
| Extract CSS files       | CSS will be extracted as separate files by default                                 | <ul><li>[tools.cssExtract](/en/api/config-tools.html#toolscssextract)</li></ul>                                                                                                                       |
| Styled Components       | Support styled components compilation by default                                   | <ul><li>[tools.styledComponents](/en/api/config-tools.html#toolsstyledcomponents)</li></ul>                                                                                                           |
| Inline CSS into JS      | Optional feature, inline CSS files to JavaScript files                             | <ul><li>[CSS Usage](/guide/basic/css-usage.html)</li><li>[tools.styleLoader](/en/api/config-tools.html#toolsstyleloader)</li></ul>                                                                    |

## HTML

| Features                | Description                                  | Links                                                                                                                                                                                                                           |
| ----------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Set title               | Set HTML title tag                           | <ul><li>[Set Page Title](/en/guide/basic/html-template.html#set-page-title)</li><li>[html.title](/en/api/config-html.html#htmltitle)</li><li>[html.titleByEntries](/en/api/config-html.html#htmltitlebyentries)</li></ul>       |
| Set meta                | Set HTML meta tag                            | <ul><li>[Set Meta Tags](/en/guide/basic/html-template.html#set-meta-tags)</li><li>[html.meta](/en/api/config-html.html#htmlmeta)</li><li>[html.metaByEntries](/en/api/config-html.html#htmlmetabyentries)</li></ul>             |
| Set favicon             | Set favicon for page                         | <ul><li>[Set Page Icon](/en/guide/basic/html-template.html#set-page-icon)</li><li>[html.favicon](/en/api/config-html.html#htmlfavicon)</li><li>[html.faviconByEntries](/en/api/config-html.html#htmlfaviconbyentries)</li></ul> |
| Set app icon            | Set apple icon for iOS                       | <ul><li>[Set Page Icon](/en/guide/basic/html-template.html#set-page-icon)</li><li>[html.appIcon](/en/api/config-html.html#htmlappicon)</li></ul>                                                                                |
| Use EJS template engine | Optional feature, use EJS template engine    | <ul><li>[tools.pug](/en/guide/basic/html-template.html#ejs)</li></ul>                                                                                                                                                           |
| Use Pug template engine | Optional feature, use pug template engine    | <ul><li>[tools.pug](/en/guide/basic/html-template.html#pug)</li></ul>                                                                                                                                                           |
| Inline JS files         | Optional feature, inline JS files into HTML  | <ul><li>[Inline Static Assets](/guide/optimization/inline-assets.html)</li><li>[output.enableInlineScripts](/en/api/config-output.html#outputenableinlinescripts)</li></ul>                                                     |
| Inline CSS files        | Optional feature, inline CSS files into HTML | <ul><li>[Inline Static Assets](/guide/optimization/inline-assets.html)</li><li>[output.enableInlineStyles](/en/api/config-output.html#outputenableinlinestyles)</li></ul>                                                       |

## Development and Debugging

| Features                | Description                                                                       | Links                                                                  |
| ----------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| Automatically open page | Optional feature, automatically open page URL in browser when starting Dev Server | <ul><li>[dev.startUrl](/en/api/config-dev.html#devstarturl) </li></ul> |
| HTTPS Dev Server        | Optional feature, enable HTTPS Dev Server                                         | <ul><li>[dev.https](/en/api/config-dev.html#devhttps)</li></ul>        |

## React

| Features               | Description                                   | Links                                                                                                                                                    |
| ---------------------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| React Refresh          | Support React Refresh by default              | <ul><li>[Hot Module Replacement](/guide/advanced/hmr.html)</li><li>[dev.hmr](/en/api/config-dev.html#devhmr)</li></ul>                                   |
| SVG to React component | Support to import SVG as component by default | <ul><li>[Import SVG Assets](/guide/basic/svg-assets.html)</li><li>[output.svgDefaultExport](/en/api/config-output.html#outputsvgdefaultexport)</li></ul> |

## Static Assets

| Features               | Description                                                                  | Links                                                                                                                                                         |
| ---------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Import image assets    | Support for import image assets in code                                      | <ul><li>[Import Static Assets](/guide/basic/static-assets.html)</li></ul>                                                                                     |
| Import font assets     | Support for import font assets in code                                       | <ul><li>[Import Static Assets](/guide/basic/static-assets.html)</li></ul>                                                                                     |
| Import video assets    | Support for import video assets in code                                      | <ul><li>[Import Static Assets](/guide/basic/static-assets.html)</li></ul>                                                                                     |
| Import wasm assets     | Support for import WebAssembly assets in code                                | <ul><li>[Import Wasm Assets](/guide/basic/wasm-assets.html)</li></ul>                                                                                         |
| Inline static assets   | Small assets are inlined into JS by default                                  | <ul><li>[Inline Static Assets](/guide/optimization/inline-assets.html)</li><li>[output.dataUriLimit](/en/api/config-output.html#outputdataurilimit)</li></ul> |
| Clean up static assets | Automatically clean up static assets in the dist directory before each build | <ul><li>[output.cleanDistPath](/en/api/config-output.html#outputcleandistpath)</li ></ul>                                                                     |
| Copy static assets     | Optional feature, copy static assets to the dist directory                   | <ul><li>[output.copy](/en/api/config-output.html#outputcopy)</li></ul>                                                                                        |
| Generate manifest file | Optional feature, generate manifest file containing static asset information | <ul><li>[output.enableAssetManifest](/en/api/config-output.html#outputenableassetmanifest)</li></ul>                                                          |

## 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 | <ul><li>[Chunk Splitting Practice](/guide/optimization/split-chunk.html)</li><li>[performance.chunkSplit](/en/api/config-performance.html#performancechunksplit)</li></ul> |
| Print File Size                | After the production build, All bundle sizes is displayed by default                                                         | <ul><li>[performance.printFileSize](/en/api/config-performance.html#performanceprintfilesize)</li></ul>                                                                    |
| Analyze bundle size            | Optional feature, analyze bundle size through Bundle Analyzer                                                                | <ul><li>[performance.bundleAnalyze](/en/api/config-performance.html#performancebundleanalyze)</li></ul>                                                                    |
| Remove console                 | Optional feature, remove `console.xx` in code                                                                                | <ul><li>[performance.removeConsole](/en/api/config-performance.html#performanceremoveconsole)</li ></ul>                                                                   |
| Optimize the size of moment.js | Optional feature, remove the redundant locale files of moment.js                                                             | <ul><li>[performance.removeMomentLocale](/en/api/config-performance.html#performanceremovemomentlocale)</li></ul>                                                          |
