#功能导航

在这里，你可以了解到 Modern.js Builder 支持的主要功能。

#JavaScript 编译

功能	描述	相关链接
Babel 编译	默认开启 Babel 编译，将 JavaScript 和 TypeScript 代码转换为向后兼容的 JavaScript 语法	tools.babel
TS 编译	默认通过 Babel 编译 TS 文件，支持切换为 ts-loader 编译	TypeScript 转译 tools.babel tools.tsLoader
TS 类型检查	默认通过 TS Checker 检查类型问题	类型检查 tools.tsChecker
JS 压缩	默认在生产环境构建时开启压缩	tools.terser
Polyfill 注入	默认会注入 core-js 等 Polyfill	浏览器兼容性 output.polyfill
SourceMap 生成	默认在生产环境构建时生成高质量 SourceMap	output.disableSourceMap
文件别名	可选功能，通过 alias 设置文件别名	路径别名 source.alias
限制源代码路径	可选功能，限制源代码的引用路径	source.moduleScopes
esbuild 编译	可选功能，通过 esbuild 对 JavaScript 和 TypeScript 代码进行转译和压缩	esbuild 插件
SWC 编译	可选功能，通过 SWC 对 JavaScript 和 TypeScript 代码进行转译和压缩	SWC 插件
Node 产物	可选功能，支持构建出运行在 Node.js 环境的 JavaScript 产物	Node 产物
Web Worker 产物	可选功能，支持构建出运行在 Web Worker 环境的 JavaScript 产物	Web Worker 产物
浏览器范围	可选功能，通过 browserslist 来设置 Web 应用需要兼容的浏览器范围	浏览器范围

#CSS 编译

功能	描述	相关链接
PostCSS 编译	默认开启 PostCSS 编译，内置 autoprefixer 等多个插件	引用样式资源 tools.postcss tools.autoprefixer
Sass 预处理	默认支持编译 Sass/Scss 文件	引用样式资源 tools.sass
Less 预处理	默认支持编译 Less 文件	引用样式资源 tools.less
Stylus 预处理	可选功能，编译 Stylus 文件	Stylus 插件
CSS Modules 编译	默认支持编译 CSS Modules 文件	使用 CSS Modules tools.cssLoader
CSS Modules 类型提示	可选功能，自动生成 CSS Modules 的类型定义文件	使用 CSS Modules enableCssModuleTSDeclaration
CSS 压缩	默认在生产环境构建时开启压缩	引用样式资源 tools.minifyCss
抽取 CSS 文件	默认会将 CSS 抽取为独立的文件	tools.cssExtract
Styled Components	默认支持 styled-components 编译	tools.styledComponents
内联 CSS 到 JS 中	可选功能，将 CSS 文件内联到 JS 文件中	引用样式资源 output.disableCssExtract

#HTML 编译

功能	描述	相关链接
设置标题	设置 HTML 的 title 标签	设置页面标题 html.title html.titleByEntries
设置 meta	设置 HTML 的 meta 标签	设置 meta 标签 html.meta html.metaByEntries
设置 favicon	设置页面的 favicon 图标	设置页面图标 html.favicon html.faviconByEntries
设置 app 图标	设置 iOS 系统下的 apple icon	设置页面图标 html.appIcon
使用 EJS 模板引擎	可选功能，使用 EJS 模板语法	模板引擎 - EJS
使用 Pug 模板引擎	可选功能，使用 Pug 模板语法	模板引擎 - Pug
内联 JS 文件	可选功能，将 JS 内联到 HTML 中	静态资源内联 output.enableInlineScripts
内联 CSS 文件	可选功能，将 CSS 内联到 HTML 中	静态资源内联 output.enableInlineStyles

#开发调试相关

功能	描述	相关链接
自动打开页面	可选功能，在启动 Dev Server 时自动在浏览器中打开页面 URL	dev.startUrl
HTTPS Dev Server	可选功能，开启 Dev Server 对 HTTPS 的支持	dev.https

#React 相关

功能	描述	相关链接
React Refresh	默认支持 React Refresh 热更新	模块热替换 dev.hmr
SVG 转 React 组件	默认支持在 React 组件中引用 SVG 作为组件	引用 SVG 资源 output.svgDefaultExport

#静态资源相关

功能	描述	相关链接
引用图片资源	支持在代码中引用图片资源	引用静态资源
引用字体资源	支持在代码中引用字体资源	引用静态资源
引用视频资源	支持在代码中引用视频资源	引用静态资源
引用 Wasm 资源	支持在代码中引用 WebAssembly 资源	引用 Wasm 资源
静态资源内联	默认将体积较小的图片等资源内联到 JS 中	静态资源内联 output.dataUriLimit
清理静态资源	每次开始构建前，自动清理 dist 目录下的静态资源	output.cleanDistPath
拷贝静态资源	可选功能，将静态资源拷贝到 dist 目录下	output.copy
生成 manifest 文件	可选功能，生成包含静态资源信息的 manifest 文件	output.enableAssetManifest

#性能相关

功能	描述	相关链接
产物自动拆包	Builder 中内置了多种拆包策略，自动将代码包拆分为体积适中的文件	拆包最佳实践 performance.chunkSplit
展示产物体积	在生产环境构建后，默认展示所有静态资源的体积信息	performance.printFileSize
分析产物体积	可选功能，通过 Bundle Analyzer 分析产物体积	performance.bundleAnalyze
移除 console	可选功能，移除代码中的 console.xx	performance.removeConsole
优化 moment.js 体积	可选功能，移除 moment.js 多余的 locale 文件	performance.removeMomentLocale