面试题：Webpack在复杂微前端架构下对JavaScript代码打包与优化的策略设计

Question

假设你负责一个复杂的微前端架构项目，多个子应用使用不同技术栈且存在复杂依赖关系，阐述如何设计Webpack策略来对JavaScript代码进行高效打包与优化，包括但不限于模块联邦、代码分割、公共依赖提取、跨应用资源复用等方面的详细策略及实施步骤。

Answer 1

模块联邦

1. 策略：使用Webpack的模块联邦插件（Module Federation Plugin），允许子应用像使用本地模块一样引用其他子应用暴露的模块，实现跨应用的资源复用。
2. 实施步骤：
   • 配置宿主应用：在宿主应用的Webpack配置中，使用ModuleFederationPlugin插件，配置remotes字段，指定远程子应用的名称和URL。例如：

new ModuleFederationPlugin({
  remotes: {
    subApp1: 'subApp1@http://localhost:3001/remoteEntry.js',
    subApp2: 'subApp2@http://localhost:3002/remoteEntry.js'
  }
})

- **配置子应用**：在每个子应用的Webpack配置中，同样使用`ModuleFederationPlugin`插件，配置`exposes`字段，将需要暴露给其他应用的模块导出。例如：

new ModuleFederationPlugin({
  name:'subApp1',
  exposes: {
    './Button': './src/components/Button.js'
  }
})

代码分割

1. 策略：通过代码分割，将应用代码分割成更小的chunk，按需加载，减少初始加载时间。
2. 实施步骤：
   • 动态导入：在JavaScript代码中使用动态导入（import()）语法，Webpack会自动将这些导入的模块分割成单独的chunk。例如：

// 懒加载组件
const loadComponent = () => import('./components/MyComponent.js');

- **Webpack配置**：在Webpack配置中，确保`optimization.splitChunks`配置合理。默认情况下，Webpack会自动对异步chunk进行代码分割。可以进一步配置`cacheGroups`来定制分割规则。例如：

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name:'vendors',
        chunks: 'all'
      }
    }
  }
}

公共依赖提取

1. 策略：提取多个子应用中的公共依赖，避免重复打包，减少整体包大小。
2. 实施步骤：
   • 使用splitChunks：利用optimization.splitChunks中的cacheGroups配置，将公共依赖提取到单独的chunk。例如：

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        name: 'commons',
        chunks: 'initial',
        minChunks: 2
      }
    }
  }
}

- **CDN引入**：对于一些大型的第三方库，如React、Vue等，可以通过CDN引入，在Webpack配置中使用`externals`排除这些库的打包。例如：

externals: {
  react:'react',
  'react - dom':'react - dom'
}

跨应用资源复用

1. 策略：除了模块联邦实现的JavaScript模块复用，还可以复用样式、图片等资源。
2. 实施步骤：
   • 样式复用：可以使用CSS Modules或Less、Sass等预处理器的@import功能，将公共样式文件引入到各个子应用中。也可以将公共样式提取到一个独立的CSS文件，通过CDN发布，各个子应用引用。
   • 图片等资源：将公共图片、字体等资源放在一个共享的静态资源服务器上，各个子应用通过URL引用。在Webpack配置中，使用file-loader或url-loader处理这些资源时，配置合适的publicPath，确保资源引用路径正确。例如：

module.exports = {
  //...
  output: {
    publicPath: 'http://cdn.example.com/'
  }
}