面试题：Webpack 静态模块打包器与动态加载在复杂微前端架构中的协作优化

1. Webpack 配置实现静态模块打包与动态加载协作

静态模块打包

entry 配置：在 webpack.config.js 中，使用 entry 字段指定基础模块的入口文件。例如：

entry: {
    common: './src/common.js'
}

这里 common.js 是基础模块的入口，Webpack 会从这里开始构建依赖图。

output 配置：通过 output 配置输出静态打包文件。如：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
}

[name] 会被替换为入口名称（这里是 common），[chunkhash] 根据文件内容生成哈希值，用于缓存控制。

动态加载业务模块

Code Splitting：利用 Webpack 的代码分割功能，通过 splitChunks 配置实现动态加载。例如：

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

这会将多个入口文件中重复的模块提取到 commons chunk 中，在需要时动态加载。

动态导入：在业务代码中使用动态导入语法 import()。例如：

// 在某个组件中
const loadFeature = async () => {
    const { featureFunction } = await import('./features/feature.js');
    featureFunction();
}

Webpack 会将 ./features/feature.js 及其依赖单独打包成一个 chunk，在调用 loadFeature 时动态加载。

2. 关键技术点

代码分割策略：合理配置 splitChunks 可以优化加载性能。例如根据业务模块的使用频率、依赖关系等进行分割，避免过大或过小的 chunk。
动态导入语法：掌握 import() 语法及其在不同环境（如 React、Vue 等框架）中的使用，确保动态加载的模块能够正确执行。
公共模块提取：将基础模块和公共依赖提取到单独的文件中，减少重复加载，提高缓存利用率。

3. 可能遇到的问题及解决方案

问题一：动态加载模块缓存问题

表现：动态加载的模块每次都重新请求，不使用缓存。 解决方案：在 output.filename 中使用 [chunkhash]，Webpack 会根据模块内容生成唯一哈希值，内容不变时哈希值不变，浏览器可以使用缓存。同时，设置合适的 HTTP 缓存头，如 Cache - Control。

问题二：模块依赖冲突

表现：不同模块依赖同一个库的不同版本，导致运行时错误。 解决方案：使用 webpack - merge 等工具合并配置，确保所有模块使用统一版本的依赖。对于一些无法避免的情况，可以使用 webpack - externals 将依赖排除在打包之外，由运行时环境提供。

问题三：构建性能问题

表现：随着项目规模增大，Webpack 构建时间过长。 解决方案：启用 parallel - webpack 插件并行处理模块，或者使用 webpack - bundle - analyzer 分析打包结果，找出体积过大或依赖复杂的模块进行优化。同时，合理配置 exclude 和 include 来减少 loader 处理的文件范围。