依赖收集与分析过程

依赖收集与分析过程

Webpack的核心功能之一是对模块依赖关系的收集与分析。这一过程决定了最终打包结果的正确性与优化程度。依赖收集从入口文件开始，通过静态分析与动态解析两种方式建立完整的依赖图。

静态依赖分析

静态分析主要处理代码中明确声明的依赖关系，例如ESM的import和CommonJS的require。Webpack会解析这些语句并提取依赖路径：

// 示例：静态依赖
import utils from './utils.js';
const lodash = require('lodash');

分析过程会：

1. 将'./utils.js'和'lodash'识别为依赖项
2. 解析路径为绝对路径
3. 创建模块间的引用关系

特殊场景处理：

• 动态表达式会触发警告

// 警告：无法静态分析
const moduleName = 'utils';
require(`./${moduleName}`); 

动态依赖处理

对于无法静态分析的场景，Webpack提供特定语法支持：

// 显式声明可能路径
require.context('./components', false, /\.vue$/);

处理流程：

1. 扫描指定目录下匹配正则的文件
2. 生成虚拟模块映射表
3. 运行时根据实际需要加载

依赖图构建

收集到的依赖会形成有向图数据结构：

// 简化的依赖图结构
{
  'entry.js': {
    deps: ['a.js', 'b.js'],
    exports: ['default']
  },
  'a.js': {
    deps: ['c.js'],
    exports: ['getName']
  }
}

关键属性包括：

• dependencies：直接依赖列表
• issuer：引用者信息
• moduleGraph：完整的模块关系网

循环依赖处理

Webpack通过以下机制解决循环引用：

// a.js
import { b } from './b';
export const a = 'A';

// b.js
import { a } from './a';
export const b = 'B';

处理策略：

1. 标记已加载模块状态
2. 返回未完全初始化的引用
3. 最终形成闭环引用关系

依赖优化阶段

分析完成后进行的优化操作：

1. Tree Shaking：

// 标记未使用导出
import { used, unused } from './module';
console.log(used);

2. Scope Hoisting：

// 合并模块作用域
// 原始代码
import { a } from './module';
console.log(a);

// 优化后
console.log('a');

3. 依赖分组：

// 根据引用频率拆分
optimization.splitChunks: {
  chunks: 'all'
}

自定义依赖解析

通过resolve配置修改解析逻辑：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  },
  extensions: ['.ts', '.js'],
  modules: ['node_modules', 'shared']
}

高级解析示例：

resolve.plugins: [
  new DirectoryNamedWebpackPlugin()
]

依赖分析工具

开发时可用的分析手段：

1. Stats输出：

webpack --profile --json > stats.json

2. 可视化工具：

new BundleAnalyzerPlugin({
  analyzerMode: 'static'
})

3. 自定义报告：

compilation.hooks.finishModules.tap('DependencyReport', modules => {
  generateCustomReport(modules);
});

性能优化实践

实际项目中的优化案例：

// 1. 按需加载
import('./heavyModule').then(module => {
  module.run();
});

// 2. 预获取
import(/* webpackPrefetch: true */ './modal.js');

// 3. 共享依赖
externals: {
  react: 'React'
}

依赖收集的Hook系统

Webpack暴露的扩展点：

compiler.hooks.compilation.tap('DependencyTracking', (compilation) => {
  compilation.hooks.finishModules.tapAsync('AnalyzeDeps', (modules, callback) => {
    analyzeModuleGraph(modules);
    callback();
  });
});

关键Hook阶段：

• beforeResolve
• afterResolve
• moduleGraph更新后

模块联邦的依赖处理

跨应用依赖共享方案：

// app1/webpack.config.js
new ModuleFederationPlugin({
  name: 'app1',
  exposes: {
    './Button': './src/Button'
  }
});

// app2/webpack.config.js 
new ModuleFederationPlugin({
  name: 'app2',
  remotes: {
    app1: 'app1@http://localhost:3001/remoteEntry.js'
  }
});

运行时依赖解析流程：

1. 加载远程入口文件
2. 建立版本映射表
3. 按需加载远程模块

缓存与增量分析

持久化缓存配置示例：

cache: {
  type: 'filesystem',
  buildDependencies: {
    config: [__filename]
  }
}

缓存失效场景：

• 文件内容变更
• loader配置修改
• 解析规则变化

依赖版本冲突解决

常见解决方案：

1. 版本协商：

resolve: {
  alias: {
    'react': path.resolve('./node_modules/react')
  }
}

2. 依赖提升：

optimization: {
  runtimeChunk: 'single'
}

3. 外部化处理：

externals: {
  'lodash': '_'
}