React SSR项目中如何在服务端Webpack Bundle复用客户端Bundle？

嘿，我来给你几个实用的方案解决这个重复编译的问题——毕竟服务端再重新打包一遍客户端代码确实挺浪费时间的，我在做React SSR项目时也踩过这个坑，这些方法亲测有效：

方案一：将客户端Bundle输出为UMD格式，服务端通过Externals复用 #

这个思路是让客户端先编译出兼容Node环境的bundle，服务端直接引用这个产物，不再重复编译客户端组件：

1. 调整客户端Webpack配置，输出UMD模块
   UMD格式能同时兼容浏览器和Node.js环境，修改webpack.client.js的output部分：

// webpack.client.js
output: {
  filename: "bundle.js",
  path: PUBLIC_PATH,
  library: "MyReactApp", // 定义全局变量名，方便不同环境引用
  libraryTarget: "umd", // 指定输出UMD格式
  globalObject: "this", // 确保在Node和浏览器环境都能正常运行
},

2. 服务端Webpack配置添加Externals规则
   告诉服务端Webpack不要编译客户端的bundle，直接引入即可：

// webpack.server.js
externals: [
  webpackNodeExternals(),
  // 自定义外部依赖规则，匹配客户端bundle
  function({ request }, callback) {
    // 这里的路径要对应你客户端bundle的实际位置
    if (request === './public/bundle.js') {
      return callback(null, 'commonjs ./public/bundle.js');
    }
    callback();
  }
],

3. 修改服务端Renderer的导入路径
   把原来从源码导入App的代码，改成从客户端bundle导入：

// renderer.tsx
// 替换原来的 import { App } from "client/App";
const { App } = require('../public/bundle.js'); // 路径根据你的项目结构调整

⚠️ 注意：如果你的App代码里有浏览器专属API（比如window、document），一定要做同构判断，比如if (typeof window !== 'undefined')再执行相关逻辑，避免服务端渲染时报错。

方案二：抽离共享组件为单独的Library（更推荐） #

如果你的项目有很多共享组件，这个方案更灵活——把共享代码单独打包成一个library，客户端和服务端都引用这个产物，彻底避免重复编译：

1. 新建共享代码的Webpack配置
   创建webpack.shared.js，专门打包App等共享组件：

// webpack.shared.js
const path = require('path');

module.exports = {
  mode: "development",
  resolve: {
    modules: ["src", "static", "node_modules"],
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  entry: ["./src/client/App.tsx"], // 你的共享组件入口文件
  output: {
    filename: "shared-components.js",
    path: path.resolve(__dirname, "dist/shared"),
    library: "SharedComponents",
    libraryTarget: "umd",
    globalObject: "this",
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{ loader: "ts-loader" }],
      },
    ],
  },
};

2. 客户端和服务端配置引用共享Library

• 客户端webpack.client.js添加externals：

externals: {
  'shared-components': 'SharedComponents' // 对应共享library的全局变量名
},

• 服务端webpack.server.js同样添加externals：

externals: [
  webpackNodeExternals(),
  { 'shared-components': 'commonjs ./dist/shared/shared-components.js' }
],

3. 统一导入共享组件
   不管是客户端的index.tsx还是服务端的renderer.tsx，都从共享library导入App：

// renderer.tsx
import { App } from 'shared-components';

// 客户端index.tsx同理
import { App } from 'shared-components';

4. 调整编译顺序
   在package.json的scripts里设置编译顺序，确保先打包共享代码，再打包客户端和服务端：

"scripts": {
  "build:shared": "webpack --config webpack.shared.js",
  "build:client": "webpack --config webpack.client.js",
  "build:server": "webpack --config webpack.server.js",
  "build": "npm run build:shared && npm run build:client && npm run build:server"
}

方案三：利用Webpack SplitChunks拆分共享代码（适合复杂项目） #

如果你的项目依赖很多，自动拆分共享chunk能帮你更高效地复用代码：

1. 客户端Webpack开启SplitChunks
   让客户端自动拆分出包含共享组件的chunk：

// webpack.client.js
optimization: {
  splitChunks: {
    chunks: 'all',
    name: 'shared', // 拆分出的共享chunk名称
  },
},

这样客户端会输出shared.js，包含App等共享代码。

2. 服务端Webpack配置Externals引用共享Chunk

// webpack.server.js
const path = require('path');

externals: [
  webpackNodeExternals(),
  (context, request, callback) => {
    if (request.includes('shared.js')) {
      // 指向客户端生成的shared.js路径
      return callback(null, `commonjs ${path.resolve(PUBLIC_PATH, 'shared.js')}`);
    }
    callback();
  },
],

3. 修改Renderer导入

// renderer.tsx
const { App } = require(path.resolve(PUBLIC_PATH, 'shared.js'));

额外注意事项 #

• TypeScript类型支持：如果用了单独打包的library，要确保类型定义能被正确识别，可以在tsconfig.json里配置typeRoots，或者直接在共享代码里生成.d.ts文件。
• 同构代码校验：定期检查共享代码，避免引入浏览器专属API，必要时用你已经通过DefinePlugin定义的IS_SERVER做判断：

if (!IS_SERVER) {
  // 执行浏览器专属逻辑，比如监听scroll事件
}

内容的提问来源于stack exchange，提问作者Ivan Semochkin