第十九届D2终端技术大会：围绕 Vite 的前端统一工具链

围绕Vite的前端统一工具链D22025●2020年作为实验性质的原型开始开发●2022年开始被新兴框架广泛采用为底层构建工具●2024:更多基于Vite的方案：TanStackStart,One,Emb●2025:create-react-app被官方废弃后的事实继承者npm周下载量2200+万次Feb2025Feb2024Feb20233.4M/weekStateofJS2024开发者问卷调查https://2024./en-US/awards/ViteVitestVite●全类别最受欢迎的库/工具在生产环境中使用Vite或基于Vite的框架的MicrosoftGoogleWISAwoiabsredcit.Vite已经成为了但，Vite还并不完美。Vite底层依然依赖多个职责重复的第三方工具Vite依赖预依赖预打包SWC拆包/产物优化Vite依赖预依赖预打包SWC拆包/产物优化ViteApplicationsupportFrameworksupport依赖预打包拆包/产物优化SWCViteApplicationsupportFrameworksupport依赖预依赖预打包SWC拆包/产物优化ViteApplicationsupportFrameworksupport依赖预依赖预打包SWC拆包/产物优化ViteViteApplicationsupportFrameworksupport依依赖预打包SWC拆包/产物优化多次重复parse/transform/codegenUnbundledESM在请求数量巨大时的性能瓶颈ViteApplicationsupportFrameworksupport依赖预打包拆包/产物优化SWC●UnbundledESM在大型项目中的性能瓶颈Vite面对的问题其实是●Parsers:babel/acorn/esbuild/espree/flow/TS/swc/uglify-js●Transformer:babel/e●Testrunner:mocha/jasmine/tape/ava/jest●Linter:jshint/eslint/biome●Formatter:prettier/eslint●Monorepotools:nx/turborepo/rush/lerna/lage/wireit碎片化导致的种种问题●转译/模块解析等行为不一致想解决这些问题，我们需要一个统一的工具链。2.统一需要共识，而Vite展现出了web生态中前基础。ViteViteVite-native测试工具VitePlusVitePlusWIPWIPFormatterLinterFormatterbetaTransformerResolverMinfierOxcSemanticAnalysisSemanticAnalysis○成熟的JSbindings(napi-rs)○成熟的WebAssembly支持100%ECMA262speccompliance+TypeScript,JSXSemanticAnalysis+ControlFlowGraphLinter*400+ESLintcompatiblerulesIDEextensions/WIPlinterplugindesignincollabw/DenoteamNode.jscompatibleCJS+ESMpathresolutionFullycustomizableTransformerTypeScript,ReactJSX,ReactFastRefresh,isolatedDeclarationsDTS,Syntax-loweringMinifierBetaFormatterPrototype3xfasterthanSWC/5xfasterthanBiomeBenchmark50~100xfasterthanESLintandscaleswithnumberofCPUcoresBenchmark28xfasterthanwebpack/enhanced-resolveBenchmark最快的transformerTS/TSX:4xfasterthanSWC/40xfasterthanBabelReactRefresh:6xfasterthanSWC/70xfasterthanBabelIsolatedDeclarationsDTSEmit:20~45xfasterthantscBenchmarkOxc-TransformerMetricsUses24%lessmemorythanSWCand70%lessthanBabeloxc-transform*51MB@swc/core*@babel/core+presets172MB95%smallerthanSWC/90%smallerthanBabeloxc-transform*@swc/core*@babel/core+presets*comparingdarwin-arm64binariesCJS+ESMinterop/Sourcemaps/OutputformatsBasiccodesplitting/CLI/ConfigfilesupportBuilt-intransforms/NoderesolverTree-shaking/define/inject高级拆包选项/ModuleFederation80%+esbuild/Rollup测试覆盖率Rollup/esbuild功能对齐Rollup/esbuild功能对齐Vite整合(unbundled)兼容性/稳定性调整VitefullbundlemodeHMR/IncrementalbuildBenchmark打包2.5k模块●OXC围绕arenaallocator做的内存管理优化●OXC研发中的0-costASTtransfer●基于0-costASTtransfer的轻量级JStransform/lintAPIWhat’sNext?ViteNow(v6)依赖预打包