面试题：Webpack依赖图优化之大型项目场景

优化依赖图提升构建速度策略

分析依赖图
- 使用webpack-bundle-analyzer插件，它以可视化方式展示打包后的文件体积及依赖关系，方便找出体积大的模块和复杂的依赖路径。例如在webpack.config.js中配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    //...
    plugins: [
        new BundleAnalyzerPlugin()
    ]
};

处理循环依赖
- 查找并重构代码：通过分析报错信息定位循环依赖模块，然后重构代码打破循环。例如在一个模块A.js中：

// A.js
import B from './B';
const a = 'A';
function useB() {
    return B.b;
}
export {a, useB};

在B.js中：

// B.js
import A from './A';
const b = 'B';
function useA() {
    return A.a;
}
export {b, useA};

这就形成了循环依赖。可将相互依赖的部分提取到新模块C.js中。 - 使用动态导入：Webpack支持动态import()语法，在循环依赖场景下，可将其中一方的导入改为动态导入。例如在A.js中：

// A.js
let B;
async function getB() {
    if (!B) {
        B = (await import('./B')).default;
    }
    return B;
}
const a = 'A';
async function useB() {
    const bModule = await getB();
    return bModule.b;
}
export {a, useB};

处理冗余依赖
- 深度分析依赖：使用depcheck工具检查项目中未使用的依赖，然后删除。安装depcheck后在命令行运行depcheck，它会列出项目中未使用的依赖包。
- 优化模块复用：确保相同模块在整个项目中只有一个实例。例如使用Webpack的CommonsChunkPlugin（Webpack 4 及之前版本）或splitChunks（Webpack 5）来提取公共模块。在webpack.config.js中配置：

module.exports = {
    //...
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

这样可以将多个模块中的公共部分提取出来，避免重复打包，减少冗余依赖。

星途面试题库

面试题：Webpack依赖图优化之大型项目场景

知识考点

面试题答案

优化依赖图提升构建速度策略