在这里，你可以了解到 Modern.js Builder 支持的主要功能。
| 功能 | 描述 | 相关链接 |
|---|---|---|
| Rspack 打包 | 可选功能，使用 Rspack 作为打包工具 | |
| Babel 编译 | 默认开启 Babel 编译，将 JavaScript 和 TypeScript 代码转换为向后兼容的 JavaScript 语法 | |
| TS 编译 | 默认通过 Babel 编译 TS 文件，支持切换为 ts-loader 编译 |
|
| TS 类型检查 | 默认通过 TS Checker 检查类型问题 | |
| JS 压缩 | 默认在生产环境构建时开启压缩 | |
| Polyfill 注入 | 默认会注入 core-js 等 Polyfill | |
| SourceMap 生成 | 默认在生产环境构建时生成高质量 SourceMap | |
| 文件别名 | 可选功能，通过 alias 设置文件别名 | |
| 限制源代码路径 | 可选功能，限制源代码的引用路径 | |
| esbuild 编译 | 可选功能，通过 esbuild 对 JavaScript 和 TypeScript 代码进行转译和压缩 | |
| SWC 编译 | 可选功能，通过 SWC 对 JavaScript 和 TypeScript 代码进行转译和压缩 | |
| Node 产物 | 可选功能，支持构建出运行在 Node.js 环境的 JavaScript 产物 | |
| Web Worker 产物 | 可选功能，支持构建出运行在 Web Worker 环境的 JavaScript 产物 | |
| 浏览器范围 | 可选功能，通过 browserslist 来设置 Web 应用需要兼容的浏览器范围 | |
| 兼容性检查 | 可选功能，分析构建产物中是否存在当前浏览器范围下不兼容的高级语法 | |
| 注入环境变量 | 可选功能，向代码中注入环境变量或表达式 | |
| Node polyfill | 可选功能，在浏览器端注入 Node 核心模块的 polyfills |
| 功能 | 描述 | 相关链接 |
|---|---|---|
| PostCSS 编译 | 默认开启 PostCSS 编译，内置 autoprefixer 等多个插件 | |
| Sass 预处理 | 默认支持编译 Sass/Scss 文件 | |
| Less 预处理 | 默认支持编译 Less 文件 | |
| Stylus 预处理 | 可选功能，编译 Stylus 文件 | |
| CSS Modules 编译 | 默认支持编译 CSS Modules 文件 | |
| CSS Modules 类型提示 | 可选功能，自动生成 CSS Modules 的类型定义文件 | |
| CSS 压缩 | 默认在生产环境构建时开启压缩 | |
| 抽取 CSS 文件 | 默认会将 CSS 抽取为独立的文件 | |
| Styled Components | 默认支持 styled-components 编译 | |
| 内联 CSS 到 JS 中 | 可选功能，将 CSS 文件内联到 JS 文件中 | |
| rem 单位转换 | 可选功能，将 CSS 中的 px 转成 rem 单位 |
| 功能 | 描述 | 相关链接 |
|---|---|---|
| 设置标题 | 设置 HTML 的 title 标签 | |
| 设置 meta | 设置 HTML 的 meta 标签 | |
| 设置 favicon | 设置页面的 favicon 图标 | |
| 设置 app 图标 | 设置 iOS 系统下的 apple icon | |
| 使用 EJS 模板引擎 | 可选功能，使用 EJS 模板语法 | |
| 使用 Pug 模板引擎 | 可选功能，使用 Pug 模板语法 | |
| 内联 JS 文件 | 可选功能，将 JS 内联到 HTML 中 | |
| 内联 CSS 文件 | 可选功能，将 CSS 内联到 HTML 中 |
| 功能 | 描述 | 相关链接 |
|---|---|---|
| 自动打开页面 | 可选功能，在启动 Dev Server 时自动在浏览器中打开页面 URL | |
| HTTPS Dev Server | 可选功能，开启 Dev Server 对 HTTPS 的支持 |
| 功能 | 描述 | 相关链接 |
|---|---|---|
| React Refresh | 默认支持 React Refresh 热更新 | |
| SVG 转 React 组件 | 默认支持在 React 组件中引用 SVG 作为组件 | |
| Vue 3 SFC 编译 | 可选功能，开启 Vue 3 SFC 单文件组件编译 | |
| Vue 3 JSX 编译 | 可选功能，开启 Vue 3 JSX 语法编译 |
| 功能 | 描述 | 相关链接 |
|---|---|---|
| 引用图片资源 | 支持在代码中引用图片资源 | |
| 引用字体资源 | 支持在代码中引用字体资源 | |
| 引用视频资源 | 支持在代码中引用视频资源 | |
| 引用 Wasm 资源 | 支持在代码中引用 WebAssembly 资源 | |
| 引用 node addons | 支持在代码中引用 Node.js addons | - |
| 静态资源内联 | 默认将体积较小的图片等资源内联到 JS 中 | |
| 清理静态资源 | 每次开始构建前，自动清理 dist 目录下的静态资源 | |
| 拷贝静态资源 | 可选功能，将静态资源拷贝到 dist 目录下 | |
| 生成 manifest 文件 | 可选功能，生成包含静态资源信息的 manifest 文件 |
| 功能 | 描述 | 相关链接 |
|---|---|---|
| 产物自动拆包 | Builder 中内置了多种拆包策略，自动将代码包拆分为体积适中的文件 | |
| 展示产物体积 | 在生产环境构建后，默认展示所有静态资源的体积信息 | |
| 分析产物体积 | 可选功能，通过 Bundle Analyzer 分析产物体积 | |
| 移除 console | 可选功能，移除代码中的 console.xx |
|
| 优化 moment.js 体积 | 可选功能，移除 moment.js 多余的 locale 文件 | |
| 组件库按需引入 | 可选功能，按需引入组件库的代码和样式 | |
| 图片压缩 | 可选功能，对引用的图片资源进行压缩处理 | |
| Preload | 可选功能，对资源进行预加载 | |
| Prefetch | 可选功能，对资源进行预获取 | |
| Preconnect | 可选功能，对资源进行预连接 | |
| DNS prefetch | 可选功能，对资源进行 DNS 预获取 |