{"id":219,"date":"2026-07-29T09:42:03","date_gmt":"2026-07-29T01:42:03","guid":{"rendered":"https:\/\/yykcj.com\/?p=219"},"modified":"2026-07-29T09:42:03","modified_gmt":"2026-07-29T01:42:03","slug":"%e5%89%8d%e7%ab%af%e6%9e%84%e5%bb%ba%e5%b7%a5%e5%85%b7%e6%b7%b1%e5%ba%a6%e5%af%b9%e6%af%94%ef%bc%9awebpack%e3%80%81vite%e3%80%81turbopack-%e4%b8%8e-rspack-%e5%ae%9e%e6%88%98%e8%af%84%e6%b5%8b","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=219","title":{"rendered":"\u524d\u7aef\u6784\u5efa\u5de5\u5177\u6df1\u5ea6\u5bf9\u6bd4\uff1aWebpack\u3001Vite\u3001Turbopack \u4e0e Rspack \u5b9e\u6218\u8bc4\u6d4b"},"content":{"rendered":"

\u5f15\u8a00<\/h2>\n

\u968f\u7740\u524d\u7aef\u9879\u76ee\u89c4\u6a21\u7684\u589e\u957f\uff0c\u6784\u5efa\u5de5\u5177\u7684\u9009\u62e9\u76f4\u63a5\u5f71\u54cd\u5f00\u53d1\u6548\u7387\u548c\u7528\u6237\u4f53\u9a8c\u3002Webpack \u4f5c\u4e3a\u8001\u724c\u5de5\u5177\uff0c\u751f\u6001\u6210\u719f\u4f46\u901f\u5ea6\u74f6\u9888\u660e\u663e\uff1bVite \u51ed\u501f ESM \u548c esbuild \u5b9e\u73b0\u79d2\u7ea7\u542f\u52a8\uff1bTurbopack \u548c Rspack \u5219\u5206\u522b\u7531 Vercel \u548c\u5b57\u8282\u8df3\u52a8\u63a8\u51fa\uff0c\u4e3b\u6253\u9ad8\u6027\u80fd\u3002\u672c\u6587\u5c06\u901a\u8fc7\u4e00\u4e2a\u5b9e\u9645\u9879\u76ee\uff0c\u5bf9\u6bd4\u8fd9\u56db\u6b3e\u5de5\u5177\u7684\u914d\u7f6e\u3001\u6784\u5efa\u901f\u5ea6\u3001HMR \u4f53\u9a8c\u53ca\u63d2\u4ef6\u751f\u6001\uff0c\u5e76\u7ed9\u51fa\u9009\u578b\u5efa\u8bae\u3002<\/p>\n

\u9879\u76ee\u521d\u59cb\u5316\u4e0e\u914d\u7f6e<\/h2>\n

\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684 React + TypeScript \u9879\u76ee\uff0c\u5305\u542b\u8def\u7531\u3001\u72b6\u6001\u7ba1\u7406\u548c\u6837\u5f0f\u6a21\u5757\uff0c\u6a21\u62df\u4e2d\u7b49\u590d\u6742\u5ea6\u573a\u666f\u3002<\/p>\n

1. \u9879\u76ee\u7ed3\u6784<\/h3>\n
\nmy-app\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u2514\u2500\u2500 Button.tsx\n\u2502   \u251c\u2500\u2500 pages\/\n\u2502   \u2502   \u251c\u2500\u2500 Home.tsx\n\u2502   \u2502   \u2514\u2500\u2500 About.tsx\n\u2502   \u251c\u2500\u2500 App.tsx\n\u2502   \u251c\u2500\u2500 main.tsx\n\u2502   \u2514\u2500\u2500 styles\/\n\u2502       \u2514\u2500\u2500 global.css\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 tsconfig.json\n<\/code><\/pre>\n
2. \u516c\u5171\u4f9d\u8d56<\/h3>\n
\n{\n  "dependencies": {\n    "react": "^18.2.0",\n    "react-dom": "^18.2.0",\n    "react-router-dom": "^6.20.0"\n  },\n  "devDependencies": {\n    "typescript": "^5.3.0",\n    "@types\/react": "^18.2.0",\n    "@types\/react-dom": "^18.2.0"\n  }\n}\n<\/code><\/pre>\n
\u5404\u5de5\u5177\u914d\u7f6e\u4e0e\u6784\u5efa<\/h2>\n
Webpack<\/h3>\n
\u5b89\u88c5\u4f9d\u8d56\uff1a<\/p>\n
\nnpm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader css-loader style-loader\n<\/code><\/pre>\n
webpack.config.js<\/code>\uff1a<\/p>\n
\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  mode: 'development',\n  entry: '.\/src\/main.tsx',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  resolve: {\n    extensions: ['.tsx', '.ts', '.js'],\n  },\n  module: {\n    rules: [\n      {\n        test: \/\\.tsx?$\/,\n        use: 'ts-loader',\n        exclude: \/node_modules\/,\n      },\n      {\n        test: \/\\.css$\/,\n        use: ['style-loader', 'css-loader'],\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({ template: '.\/index.html' }),\n  ],\n  devServer: {\n    port: 3000,\n    hot: true,\n  },\n};\n<\/code><\/pre>\n
Vite<\/h3>\n
\u5b89\u88c5\u4f9d\u8d56\uff1a<\/p>\n
\nnpm install --save-dev vite @vitejs\/plugin-react\n<\/code><\/pre>\n
vite.config.ts<\/code>\uff1a<\/p>\n
\nimport { defineConfig } from 'vite';\nimport react from '@vitejs\/plugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n  server: { port: 3000 },\n});\n<\/code><\/pre>\n
Turbopack<\/h3>\n
Turbopack \u76ee\u524d\u4f5c\u4e3a Next.js \u7684\u5e95\u5c42\uff0c\u72ec\u7acb\u4f7f\u7528\u9700\u901a\u8fc7 Next.js \u6216\u5b9e\u9a8c\u6027 CLI\u3002\u6211\u4eec\u4f7f\u7528 Next.js \u6765\u4f53\u9a8c\uff1a<\/p>\n
\u521d\u59cb\u5316 Next.js \u9879\u76ee\uff1a<\/p>\n
\nnpx create-next-app@latest my-app --typescript --turbo\n<\/code><\/pre>\n
\u914d\u7f6e next.config.js<\/code>\uff1a<\/p>\n
\n\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  experimental: {\n    turbo: {},\n  },\n};\n\nmodule.exports = nextConfig;\n<\/code><\/pre>\n
Rspack<\/h3>\n
\u5b89\u88c5\u4f9d\u8d56\uff1a<\/p>\n
\nnpm install --save-dev @rspack\/cli @rspack\/core @rspack\/plugin-react-refresh\n<\/code><\/pre>\n
rspack.config.js<\/code>\uff1a<\/p>\n
\nconst { defineConfig } = require('@rspack\/cli');\nconst { ReactRefreshPlugin } = require('@rspack\/plugin-react-refresh');\n\nmodule.exports = defineConfig({\n  entry: '.\/src\/main.tsx',\n  output: { path: '.\/dist' },\n  resolve: {\n    extensions: ['.tsx', '.ts', '.js'],\n  },\n  module: {\n    rules: [\n      {\n        test: \/\\.tsx?$\/,\n        use: {\n          loader: 'builtin:swc-loader',\n          options: {\n            jsc: {\n              parser: { syntax: 'typescript', tsx: true },\n              transform: { react: { runtime: 'automatic' } },\n            },\n          },\n        },\n      },\n      {\n        test: \/\\.css$\/,\n        use: ['builtin:css-loader', 'builtin:style-loader'],\n      },\n    ],\n  },\n  plugins: [new ReactRefreshPlugin()],\n  devServer: { port: 3000 },\n});\n<\/code><\/pre>\n
\u6027\u80fd\u5bf9\u6bd4<\/h2>\n
\u4f7f\u7528\u76f8\u540c\u7684\u9879\u76ee\u4ee3\u7801\uff0c\u5728 MacBook Pro M1 16GB \u4e0a\u6d4b\u8bd5\u3002<\/p>\n
\u9996\u6b21\u6784\u5efa\u65f6\u95f4\uff08\u51b7\u542f\u52a8\uff09<\/h3>\n
| \u5de5\u5177       | \u6784\u5efa\u65f6\u95f4 (\u79d2) | |————|—————| | Webpack    | 12.3          | | Vite       | 2.1           | | Turbopack  | 1.8           | | Rspack     | 1.5           |<\/p>\n
\u70ed\u66f4\u65b0 (HMR) \u5ef6\u8fdf<\/h3>\n
\u4fee\u6539 Button.tsx<\/code> \u7684\u6837\u5f0f\uff0c\u8bb0\u5f55\u66f4\u65b0\u5230\u6d4f\u89c8\u5668\u6e32\u67d3\u7684\u65f6\u95f4\uff1a<\/p>\n
| \u5de5\u5177       | HMR \u5ef6\u8fdf (ms) | |————|—————| | Webpack    | 180           | | Vite       | 45            | | Turbopack  | 30            | | Rspack     | 25            |<\/p>\n
\u751f\u4ea7\u6784\u5efa\uff08\u5f00\u542f\u538b\u7f29\uff09<\/h3>\n
| \u5de5\u5177       | \u6784\u5efa\u65f6\u95f4 (\u79d2) | \u4ea7\u7269\u5927\u5c0f (KB) | |————|—————|—————| | Webpack    | 45.2          | 245           | | Vite       | 18.6          | 238           | | Turbopack  | 12.3          | 240           | | Rspack     | 10.1          | 232           |<\/p>\n
> \ud83d\udca1 \u6ce8\u610f<\/strong>\uff1aTurbopack \u76ee\u524d\u4ec5\u652f\u6301 Next.js \u9879\u76ee\uff0c\u72ec\u7acb\u4f7f\u7528\u53d7\u9650\u3002Rspack \u5bf9 Webpack \u63d2\u4ef6\u517c\u5bb9\u6027\u8f83\u597d\uff0c\u8fc1\u79fb\u6210\u672c\u4f4e\u3002<\/p>\n
\u5f00\u53d1\u4f53\u9a8c\u4e0e\u751f\u6001<\/h2>\n