1. 为什么选择ViteTypeScriptSWC这套组合如果你最近在关注前端工具链的演进一定听说过Vite这个名字。作为新一代前端构建工具Vite凭借其闪电般的启动速度和热更新效率正在快速取代传统的Webpack。而当我们把Vite与TypeScript和SWC这两个强力搭档组合在一起时就能打造出一个开发体验极佳的React项目环境。我去年接手的一个电商后台项目最初使用的是Create React App Webpack的传统方案。随着项目规模扩大每次启动开发服务器要等近1分钟保存代码后的热更新也要5-10秒。后来我尝试迁移到ViteSWC的方案冷启动时间直接降到3秒以内热更新几乎瞬间完成团队开发效率提升了至少30%。TypeScript的类型系统为大型项目提供了更好的代码可维护性而SWC这个用Rust编写的高性能编译器相比传统的Babel或tsc在编译速度上有数量级的提升。实测下来同样的代码量SWC的编译速度能比Babel快20倍左右。2. 环境准备与项目初始化2.1 确保Node.js环境就绪在开始之前请确保你的开发机上已经安装了Node.js环境。我强烈推荐使用nvmNode Version Manager来管理Node版本这样可以很方便地在不同项目间切换Node版本。对于这个技术栈Node.js版本需要≥18.0.0。# 检查Node.js版本 node -v # 如果版本低于18.0.0可以使用nvm安装新版本 nvm install 18 nvm use 182.2 使用Vite脚手架创建项目Vite官方提供了非常便捷的项目初始化方式只需要一行命令npm create vitelatest执行这个命令后你会进入一个交互式的命令行界面首先输入你的项目名称比如my-react-app选择框架时用方向键选择React选择语言时选择TypeScript SWC这个选项这里有个小技巧如果你不想走交互流程可以直接用以下命令一键创建项目npm create vitelatest my-react-app -- --template react-ts-swc2.3 项目目录结构解析初始化完成后你会看到如下的目录结构my-react-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── App.css │ ├── App.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts这里特别要提一下vite.config.ts文件它是Vite的核心配置文件。默认情况下Vite已经为我们配置好了React和SWC的支持import { defineConfig } from vite import react from vitejs/plugin-react-swc export default defineConfig({ plugins: [react()], })3. 关键配置优化3.1 关闭React严格模式在main.tsx中你会看到React默认启用了严格模式ReactDOM.createRoot(document.getElementById(root)!).render( React.StrictMode App / /React.StrictMode )在实际项目中我建议关闭严格模式。这是因为严格模式会导致组件渲染两次仅在开发环境这虽然有助于发现潜在问题但也会干扰一些副作用操作的调试特别是当你使用一些第三方库时可能会遇到奇怪的问题。修改为ReactDOM.createRoot(document.getElementById(root)!).render( App / )3.2 配置Sass/Scss支持虽然Vite原生支持CSS但现代前端项目通常会使用Sass这样的预处理器。要添加Sass支持非常简单首先安装sassnpm install sass --save-dev然后只需将.css文件重命名为.scssVite会自动识别并处理。比如把index.css改为index.scss后记得更新main.tsx中的引用import ./index.scss如果你想定义一些全局的Sass变量或mixin可以在vite.config.ts中配置export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: import ./src/styles/variables;, }, }, }, })3.3 设置路径别名随着项目规模扩大相对路径引用会变得难以维护。配置路径别名可以让导入更清晰首先安装必要的类型声明npm install types/node --save-dev在vite.config.ts中配置import { resolve } from path export default defineConfig({ resolve: { alias: { : resolve(__dirname, src), components: resolve(__dirname, src/components), }, }, })为了让TypeScript也能识别这些别名需要在tsconfig.json中添加{ compilerOptions: { baseUrl: ., paths: { /*: [./src/*], components/*: [./src/components/*] } } }现在你可以这样导入组件了import Button from /components/Button4. 高级功能集成4.1 路由配置对于单页应用路由是必不可少的。React生态中最流行的路由库是React Routernpm install react-router-dom然后在项目中创建一个路由配置文件比如src/router/index.tsximport { createBrowserRouter } from react-router-dom import App from /App import Home from /pages/Home import About from /pages/About const router createBrowserRouter([ { path: /, element: App /, children: [ { index: true, element: Home / }, { path: about, element: About / }, ], }, ]) export default router最后在main.tsx中使用import { RouterProvider } from react-router-dom import router from ./router ReactDOM.createRoot(document.getElementById(root)!).render( RouterProvider router{router} / )4.2 API请求封装在实际项目中我们通常会封装一个统一的HTTP客户端。这里以axios为例npm install axios创建src/api/http.tsimport axios from axios const http axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000, headers: { Content-Type: application/json, }, }) // 请求拦截器 http.interceptors.request.use((config) { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器 http.interceptors.response.use( (response) response.data, (error) { if (error.response?.status 401) { // 处理未授权 } return Promise.reject(error) } ) export default http4.3 环境变量配置Vite使用特殊的import.meta.env来访问环境变量。首先创建.env文件.env # 所有情况下都会加载 .env.local # 所有情况下都会加载但会被git忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载但会被git忽略例如.env.developmentVITE_API_BASE_URLhttp://localhost:3000/api.env.productionVITE_API_BASE_URLhttps://api.example.com然后在代码中可以通过import.meta.env.VITE_API_BASE_URL访问。4.4 集成Ant DesignAnt Design是React生态中非常流行的UI组件库npm install antd ant-design/icons配置中文语言和主题import { ConfigProvider } from antd import zhCN from antd/locale/zh_CN ReactDOM.createRoot(document.getElementById(root)!).render( ConfigProvider locale{zhCN} App / /ConfigProvider )如果需要定制主题可以创建一个theme.ts文件export default { token: { colorPrimary: #1890ff, borderRadius: 4, }, }然后在ConfigProvider中使用import theme from ./theme ConfigProvider theme{theme} App / /ConfigProvider5. 性能优化技巧5.1 代码分割与懒加载Vite默认支持ES模块的动态导入这让我们可以轻松实现路由级别的代码分割const Home lazy(() import(/pages/Home)) const About lazy(() import(/pages/About)) const router createBrowserRouter([ { path: /, element: ( Suspense fallback{divLoading.../div} App / /Suspense ), children: [ { index: true, element: Home / }, { path: about, element: About / }, ], }, ])5.2 按需加载组件库对于Ant Design这样的组件库我们可以通过babel-plugin-import实现按需加载。由于我们使用SWC需要在vite.config.ts中配置import { defineConfig } from vite import react from vitejs/plugin-react-swc export default defineConfig({ plugins: [ react({ jsxImportSource: emotion/react, plugins: [[import, { libraryName: antd, style: true }]], }), ], })5.3 构建优化在生产构建时可以添加以下优化配置export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { react: [react, react-dom], antd: [antd, ant-design/icons], router: [react-router-dom], }, }, }, }, })5.4 使用SWC插件增强功能SWC社区提供了一些有用的插件比如swc-plugin-react-remove-properties可以移除开发属性npm install swc-plugin-react-remove-properties --save-dev然后在.swcrc配置文件中{ jsc: { experimental: { plugins: [ [swc-plugin-react-remove-properties, { properties: [data-testid] }] ] } } }6. 常见问题解决6.1 热更新失效有时你可能会遇到修改文件后热更新没有生效的情况。这通常是因为文件名或路径包含特殊字符如中文字符文件系统监视限制特别是在WSL或虚拟机中解决方案export default defineConfig({ server: { watch: { usePolling: true, }, }, })6.2 TypeScript类型错误当引入一些没有类型定义的第三方库时可以创建一个types目录来存放自定义类型声明src/types/module.d.tsdeclare module some-untyped-module { export const someFunction: () void }6.3 样式冲突在大型项目中CSS类名冲突是个常见问题。可以考虑使用CSS Modules使用CSS-in-JS方案如Emotion添加项目前缀以CSS Modules为例import styles from ./App.module.scss function App() { return div className{styles.container}Hello/div }6.4 生产环境调试有时候生产环境的bug在开发环境无法复现。可以启用sourcemapexport default defineConfig({ build: { sourcemap: true, }, })但请记住在正式发布时移除这个配置因为它会显著增加构建产物体积。