面试题：Webpack与Angular集成依赖管理的极端场景及解决方案

解决方案

Webpack 别名（Aliases）

可以使用 webpack 的 alias 配置来针对不同的微前端应用指定不同版本的依赖。例如，假设我们有 lodash 这个共享依赖，不同微前端应用可能需要不同版本。
在 webpack 配置文件（通常是 webpack.extra.js 之类的文件，具体取决于项目结构）中：

const path = require('path');
module.exports = {
  resolve: {
    alias: {
     // 微前端应用 A 使用 lodash@1.0.0
     'lodash - appA': path.resolve(__dirname, 'node_modules/lodash@1.0.0'),
     // 微前端应用 B 使用 lodash@2.0.0
     'lodash - appB': path.resolve(__dirname, 'node_modules/lodash@2.0.0')
    }
  }
};

然后在各个微前端应用的代码中，引入依赖时使用对应的别名：

// 微前端应用 A
import _ from 'lodash - appA';
// 微前端应用 B
import _ from 'lodash - appB';

Webpack 外部扩展（externals）

将共享依赖设置为外部扩展，让微前端应用在运行时从公共的地方加载这些依赖。可以使用 html - webpack - externals - plugin 来实现。
首先安装插件：npm install html - webpack - externals - plugin --save - dev。
在 webpack 配置中：

const HtmlWebpackExternalsPlugin = require('html - webpack - externals - plugin');
module.exports = {
  externals: {
    // 假设所有微前端应用都需要 lodash，将其设置为外部扩展
    'lodash': 'lodash'
  },
  plugins: [
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'lodash',
          entry: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
          global: 'lodash'
        }
      ]
    })
  ]
};

这样所有微前端应用都从 CDN 加载 lodash，通过这种方式实现依赖共享。

优化性能实现共享依赖

依赖预提取（Pre - fetching）
- 利用 webpack 的 prefetch 功能，在微前端应用加载之前，提前请求共享依赖。在 webpack 配置中，对于共享依赖模块，可以使用 output.prefetch 配置：
```
module.exports = {
  output: {
    //...其他配置
    prefetch: true
  }
};
```
- 这样在主资源加载完成后，浏览器会提前请求这些预取的模块，当微前端应用需要时可以更快地加载。
公共依赖提取
- 使用 webpack 的 SplitChunksPlugin 来提取公共依赖。在 webpack 配置中：
```
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'commons'
    }
  }
};
```
- 这会将所有微前端应用的公共依赖提取到一个单独的文件（例如 commons.js）中，浏览器加载时可以缓存这个公共文件，不同微前端应用再次加载时直接从缓存中读取，提高性能。

可能遇到的风险及应对策略

版本兼容性风险
- 风险：不同版本的依赖可能存在 API 差异，导致部分微前端应用功能异常。例如，lodash 的不同版本可能对某些函数的参数、返回值有不同的处理。
- 应对策略：在项目开发过程中，对使用的依赖版本进行严格的测试和兼容性检查。可以建立一个测试环境，针对每个微前端应用使用不同版本依赖进行功能测试，确保功能正常。同时，关注依赖的官方文档，了解版本之间的变化，尽量选择兼容性较好的版本。
加载顺序风险
- 风险：当使用外部扩展从 CDN 加载依赖时，如果加载顺序不当，可能会导致某些微前端应用在使用依赖时，依赖还未加载完成。
- 应对策略：可以通过 html - webpack - externals - plugin 的 priority 配置来指定加载优先级，确保共享依赖在微前端应用代码之前加载完成。另外，在微前端应用代码中，可以使用动态导入（import()）并配合 async/await 来确保依赖加载完成后再执行相关逻辑。
缓存更新风险
- 风险：如果共享依赖的缓存没有及时更新，可能会导致微前端应用使用旧版本的依赖，特别是在依赖有重要 bug 修复或功能更新时。
- 应对策略：在 CDN 配置中，可以使用版本号或哈希值作为 URL 的一部分，例如 https://cdn.jsdelivr.net/npm/lodash@4.17.21 - hashvalue/lodash.min.js。这样当依赖更新时，URL 发生变化，浏览器会重新请求新的资源，避免使用旧缓存。同时，可以设置合理的缓存过期时间，确保缓存不会长时间不更新。

星途面试题库

面试题：Webpack与Angular集成依赖管理的极端场景及解决方案

知识考点

面试题答案

解决方案

优化性能实现共享依赖

可能遇到的风险及应对策略