React-TypeScript项目Jenkins构建crypto-js模块解析失败及优化求助

一、修复"resolving fallback for shared module crypto-js"错误 #

1. 调整Module Federation的共享依赖配置 #

问题出在ModuleFederationPlugin的shared选项中，你将所有deps依赖都设为共享，但crypto-js这类工具库通常不需要跨模块联邦共享，或者需要明确配置其共享规则。

修改webpack.qa.js中的shared配置：

shared: {
  // 只保留需要共享的核心依赖，移除自动引入所有deps的逻辑
  react: { singleton: true, eager: true, requiredVersion: deps.react },
  "react-dom": {
    singleton: true,
    eager: true,
    requiredVersion: deps["react-dom"]
  },
  // 若确实需要共享crypto-js，明确指定版本和规则
  // "crypto-js": { requiredVersion: deps["crypto-js"], singleton: true }
}

2. 配置webpack resolve fallback（可选） #

如果上述修改无效，添加resolve.fallback配置指定crypto-js的解析路径：

resolve: {
  extensions: [".ts", ".tsx", ".js"],
  fallback: {
    "crypto-js": require.resolve("crypto-js")
  }
}

3. 规范CI环境的依赖安装 #

在Jenkins构建脚本中使用npm ci代替npm install，确保依赖版本与本地package-lock.json完全一致，避免版本差异导致的解析问题：

npm ci

二、优化构建性能，缩短耗时 #

1. 优化TypeScript编译速度 #

使用fork-ts-checker-webpack-plugin将类型检查与代码转译分离，提升ts-loader处理速度：

• 安装插件：

npm install fork-ts-checker-webpack-plugin --save-dev

• 修改webpack配置：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

// 调整ts-loader规则
module: {
  rules: [
    {
      test: /\.(js|jsx|tsx|ts)$/,
      loader: "ts-loader",
      exclude: /node_modules/,
      options: {
        transpileOnly: true // 只做代码转译，不进行类型检查
      }
    },
    // 其他规则...
  ]
},

// 在plugins中添加类型检查插件
plugins: [
  new ForkTsCheckerWebpackPlugin({
    async: false // 生产环境建议同步检查，避免遗漏类型错误
  }),
  // 其他插件...
]

2. 启用文件系统缓存 #

将webpack缓存改为文件系统类型，提升重复构建速度（CI环境若能缓存缓存目录，效果更明显）：

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename] // 配置文件变化时，缓存自动失效
    }
  },
  // 其他配置...
}

3. 替换TerserPlugin为ESBuildMinifyPlugin #

ESBuild的压缩速度远快于Terser，可大幅缩短生产构建的压缩阶段耗时：

• 安装依赖：

npm install esbuild-loader --save-dev

• 修改webpack的optimization配置：

const { ESBuildMinifyPlugin } = require('esbuild-loader');

optimization: {
  runtimeChunk: true,
  minimize: true,
  minimizer: [
    new ESBuildMinifyPlugin({
      target: 'es2015',
      compress: {
        drop_console: false // 保持原有配置
      }
    })
  ],
},

4. 精简Module Federation共享依赖 #

避免将所有依赖都设为共享，只保留跨微应用需要复用的核心库（如react、react-dom），减少webpack的依赖解析压力。

5. CI环境缓存优化 #

在Jenkins中配置缓存策略，缓存node_modules和webpack缓存目录（通常是node_modules/.cache/webpack），避免每次构建都重新安装依赖和重新编译。

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