面试题：TypeScript Monorepo架构下的依赖管理与构建优化

Lerna配置优化

使用lerna clean：定期运行lerna clean命令，它会删除所有包的node_modules目录，然后重新运行lerna install。这可以确保依赖项的一致性，并避免因残留旧依赖导致的问题。例如：

lerna clean
lerna install

启用hoist选项：在lerna.json中设置"hoist": true，Lerna会将所有包共有的依赖提升到根目录的package.json中。这样可以减少每个子包中重复安装相同依赖的情况，例如：

{
  "lerna": "4.0.0",
  "packages": ["packages/*"],
  "version": "0.0.0",
  "hoist": true
}

Webpack配置优化

使用DLLPlugin和DLLReferencePlugin：对于不会经常变动的依赖，可以通过Webpack的DLLPlugin将这些依赖提前打包成一个单独的文件（动态链接库）。然后在每个子包的Webpack配置中使用DLLReferencePlugin来引用这个预打包的文件，减少每次构建时对这些依赖的重复打包。
- 生成DLL文件：在根目录创建一个webpack.dll.js文件，例如：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['react', 'react - dom'] // 这里列出不会经常变动的依赖
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dll', '[name].manifest.json'),
      name: '[name]_[hash]'
    })
  ]
};

然后运行webpack --config webpack.dll.js生成DLL文件。 - 在子包中引用：在每个子包的Webpack配置中添加DLLReferencePlugin，例如：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: path.join(__dirname, '../dll/vendor.manifest.json')
    })
  ]
};

优化module.rules：对于TypeScript文件，确保ts-loader的配置是最优的。可以通过设置transpileOnly: true来开启仅转译模式，这样会跳过类型检查，加快构建速度。但需要注意的是，这会使类型错误在运行时才可能被发现，所以在开发过程中仍建议定期运行完整的类型检查。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ]
      }
    ]
  }
};

TypeScript配置优化

使用tsconfig.json的incremental选项：在项目根目录的tsconfig.json中启用incremental: true，TypeScript编译器会在构建时只重新编译发生变化的文件及其依赖，而不是整个项目。同时，需要指定tsBuildInfoFile来告诉编译器存储增量编译信息的文件路径。例如：

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.cache/tsconfig.tsbuildinfo",
    // 其他配置...
  }
}

优化exclude和include选项：在tsconfig.json中，合理设置exclude和include选项，确保只编译必要的文件。例如，如果某些目录（如测试文件目录、文档目录等）不需要在构建时被编译，可以将它们排除在外。

{
  "compilerOptions": {
    // 其他配置...
  },
  "exclude": ["test", "docs"]
}

面试题：TypeScript Monorepo架构下的依赖管理与构建优化

知识考点

面试题答案

Lerna配置优化

Webpack配置优化

TypeScript配置优化