Vite 目前默认使用 Babel 的原因是安装大小和实用性之间的权衡。SWC 的安装量相当大(node_modules 中有 58 MB,而 Vite 只有 19 MB),并且许多用户仍然依赖 Babel 进行其他转换,因此 Babel 对他们来说是不可避免的。但是,这种情况在未来可能会发生改变。 Vite core 并不依赖 Babel,因此使用 SWC 而不是 Babel ...
"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"vite build"},"keywords":[],"author":"","license":"ISC","devDependencies":{"@rollup/plugin-swc":"^0.3.0","@swc/cli":"^0.1.63","@swc/core":"^1.3.102","rollup":"^4.9.2","typescript":"^5.3.3"...
因此从 Vite 4 开始,它们已经从 Vite core monorepo 中移出。开发过程中使用 SWC 的新 React 插件 SWC 现在是 Babel 的成熟替代品,特别是在 React 项目的背景下。SWC 的 React Fast Refresh 实现比 Babel 快很多,对于一些项目来说,它现在是一个更好的选择。从 Vite 4 开始,有两个插件可用于 React 项目...
Vite 目前默认为 Babel 的原因是在安装大小和实用性之间进行权衡。SWC 的安装容量相当大(node_modules 中占用 58MB,而 Vite 本身才 19MB),许多用户仍然依赖 Babel 进行其他转换,因此 Babel pass 对他们来说是不可避免的。当然,这在未来可能会改变。 Vite core 不依赖 Babel。只需要用 vite-plugin-swc-react-r...
Vite的目标不是要干掉webpack 从定位来说两者就是不一样的:webpack core 是一个纯打包工具(对标...
// you need to INSTALL `@swc/core` as dev dependency if you want to use swctsCompiler:'esbuild',// Optional, default: {// jsc: {// target: 'es2019',// parser: {// syntax: 'typescript',// decorators: true// },// transform: {// legacyDecorator: true,// decoratorMetadata: ...
Vite core 不依赖 Babel。只需要用vite-plugin-swc-react-refresh[4] 来替换默认的 React 插件即可。切换后,我们看到了根案例中 Vite 的显著改进,超过了 Next: 有趣的是,这里的成长曲线显示,Next/turbo 在根情况下比叶情况下慢 4 倍,而 Vite 只慢 2.4 倍。这意味着 Vite HMR 在更大型的组件中表现更好。
vite-plugin-node-polyfills - Polyfill Node's Core Modules for browser environments. vite-plugin-cdn2 - Replace module with CDN. vite-plugin-bundle-prefetch - Inject prefetch assets into index.html. vite-plugin-imagemin - Optimize and compress your image assets and optionally create WebP/AVIF. vi...
@swc/core@1.3.100: + resolution: {integrity: sha512-7dKgTyxJjlrMwFZYb1auj3Xq0D8ZBe+5oeIgfMlRU05doXZypYJe0LAk0yjj3WdbwYzpF+T1PLxwTWizI0pckw==} + engines: {node: '>=10'} + requiresBuild: true + peerDependencies: + '@swc/helpers': ^0.5.0 + peerDependenciesMeta: + '@swc/...
@vitejs/plugin-react-swc- Official React support that uses SWC. Presets vite-preset-react- All in one preset for your React app - HMR, Automatic React inject, removal of DevTools in prod. Routing generouted- Client-side type-safe file-based routing and global modals — supports layouts, lo...