Lesson 09-Source Code Analysis of Mainstream Modular Tools

Webpack Modular Source Code

Module Resolution and Dependency Graph Construction

Module Resolution Process Source Code Analysis:

1. Entry File Resolution:
   • Starts from the entry configuration, invoking NormalModuleFactory to create modules.
   • Key source: webpack/lib/NormalModuleFactory.js
2. Dependency Collection Process:
   • Uses Parser to parse the AST and extract dependency relationships.
   • Key source: webpack/lib/Parser.js and webpack/lib/dependencies/
3. Dependency Graph Construction:
   • The Compilation class is responsible for building the complete dependency graph.
   • Key methods: buildModule and addModuleDependencies

// Simplified dependency graph construction process
class Compilation {
  buildModule(module, callback) {
    // 1. Create module instance
    // 2. Parse module content
    // 3. Extract dependencies
    // 4. Recursively build dependent modules
  }
}

// Simplified dependency graph construction process
class Compilation {
  buildModule(module, callback) {
    // 1. Create module instance
    // 2. Parse module content
    // 3. Extract dependencies
    // 4. Recursively build dependent modules
  }
}

Key Data Structures:

• DependencyGraph: Represents dependency relationships between modules.
• Module: Abstract base class for modules, with implementations like NormalModule.
• Chunk: Code block containing a group of modules.

Loader and Plugin Mechanisms

Loader Execution Process Source Code:

1. Loader Chain Execution:
   • LoaderRunner manages the execution of the loader chain.
   • Source: webpack/lib/LoaderRunner.js
2. Loader Context:
   • Provides context information such as file paths and resource queries.
   • Source: webpack/lib/LoaderContext.js

Plugin System Implementation:

1. Tapable Event System:
   • Core classes: Compiler and Compilation inherit from Tapable.
   • Source: webpack/lib/Tapable.js
2. Plugin Hook Registration:
   • Uses compiler.hooks.<hookName>.tap() to register plugins.
   • Key source: webpack/lib/Compiler.js

// Simplified plugin registration example
compiler.hooks.compile.tap('MyPlugin', (params) => {
  // Plugin logic
});

// Simplified plugin registration example
compiler.hooks.compile.tap('MyPlugin', (params) => {
  // Plugin logic
});

Code Generation and Bundle Output

Code Generation Process:

1. Template Rendering:
   • Uses the Template class to generate final code.
   • Source: webpack/lib/Template.js
2. Chunk Generation:
   • MainTemplate and ChunkTemplate handle different types of code generation.
   • Key source: webpack/lib/MainTemplate.js
3. Output File Generation:
   • OutputFileSystem manages file writing.
   • Source: webpack/lib/util/fs.js

Key Code Generation Logic:

// Simplified code generation process
class Compiler {
  emitAssets(compilation, callback) {
    // 1. Iterate through all chunks
    // 2. Generate code using templates
    // 3. Write to the file system
  }
}

// Simplified code generation process
class Compiler {
  emitAssets(compilation, callback) {
    // 1. Iterate through all chunks
    // 2. Generate code using templates
    // 3. Write to the file system
  }
}

Tree Shaking Implementation Principles

Tree Shaking Core Mechanisms:

1. Marking Unused Exports:
   • MarkUsedExportsPlugin handles marking.
   • Source: webpack/lib/optimize/MarkUsedExportsPlugin.js
2. Side Effect Analysis:
   • Uses the sideEffects field in package.json.
   • Source: webpack/lib/util/hasSideEffects.js
3. Dead Code Elimination:
   • TerserPlugin performs final code compression.
   • Source: webpack/lib/optimize/TerserPlugin.js

Key Data Structures:

• UsedExports: Tracks the usage of module exports.
• SideEffectsFlagPlugin: Manages side effect marking.

Module Federation Source Code Implementation

Module Federation Core Source Code:

1. ModuleFederationPlugin:
   • Main class defined in webpack/lib/container/ModuleFederationPlugin.js.
2. Remote Module Loading:
   • ContainerReferencePlugin handles remote references.
   • Source: webpack/lib/container/ContainerReferencePlugin.js.
3. Shared Dependency Coordination:
   • SharedModuleRuntimeModule manages shared modules.
   • Source: webpack/lib/container/SharedModuleRuntimeModule.js.

Key Implementation Logic:

// Simplified module federation loading process
class ModuleFederationPlugin {
  apply(compiler) {
    // 1. Register remote module information
    // 2. Modify runtime code to support dynamic loading
    // 3. Handle shared dependencies
  }
}

// Simplified module federation loading process
class ModuleFederationPlugin {
  apply(compiler) {
    // 1. Register remote module information
    // 2. Modify runtime code to support dynamic loading
    // 3. Handle shared dependencies
  }
}

Rollup Modular Source Code

Module Resolution and Dependency Graph Construction

Rollup Module Resolution Process:

1. Entry File Resolution:
   • InputPlugin processes entry configuration.
   • Source: rollup/src/rollup/index.js
2. Dependency Collection:
   • The Module class handles individual module parsing.
   • Source: rollup/src/Module.js
3. Dependency Graph Construction:
   • The Graph class manages the entire dependency relationship.
   • Source: rollup/src/Graph.js

Key Code Example:

// Simplified dependency graph construction
class Graph {
  async build() {
    // 1. Parse entry module
    // 2. Recursively parse dependencies
    // 3. Build complete dependency graph
  }
}

// Simplified dependency graph construction
class Graph {
  async build() {
    // 1. Parse entry module
    // 2. Recursively parse dependencies
    // 3. Build complete dependency graph
  }
}

Tree Shaking Implementation Principles

Rollup Tree Shaking Core:

1. Static AST Analysis:
   • Uses acorn for AST parsing and estree-walker for traversal.
   • Source: rollup/src/ast/
2. Marking Unused Code:
   • The Bundle class handles the marking process.
   • Source: rollup/src/Bundle.js
3. Side Effect Analysis:
   • isPureExternalModule determines external module purity.
   • Source: rollup/src/utils/pureExternalModules.js

Key Implementation Logic:

// Simplified Tree Shaking process
class Bundle {
  generate() {
    // 1. Analyze module dependencies
    // 2. Mark unused exports
    // 3. Generate optimized code
  }
}

// Simplified Tree Shaking process
class Bundle {
  generate() {
    // 1. Analyze module dependencies
    // 2. Mark unused exports
    // 3. Generate optimized code
  }
}

Plugin System Source Code Analysis

Rollup Plugin System Architecture:

1. Plugin Hook Definitions:
   • PluginContext provides the plugin API.
   • Source: rollup/src/PluginContext.js
2. Hook Execution Order:
   • The Hook class manages the hook lifecycle.
   • Source: rollup/src/Hook.js
3. Plugin API Implementation:
   • Hooks like resolveId, load, etc.
   • Source: rollup/src/rollup/index.js

Key Code Example:

// Simplified plugin hook registration
class Rollup {
  constructor(options) {
    this.plugins = options.plugins.map(plugin => ({
      ...plugin,
      // Wrap plugin methods to support hook system
    }));
  }
}

// Simplified plugin hook registration
class Rollup {
  constructor(options) {
    this.plugins = options.plugins.map(plugin => ({
      ...plugin,
      // Wrap plugin methods to support hook system
    }));
  }
}

Code Generation and Bundle Output

Rollup Code Generation Process:

1. Code Generator:
   • The CodeGenerator class generates the final code.
   • Source: rollup/src/CodeGenerator.js
2. Chunk Generation:
   • The Chunk class represents a code block.
   • Source: rollup/src/Chunk.js
3. Output Plugin:
   • OutputPlugin handles file output.
   • Source: rollup/src/OutputPlugin.js

Key Implementation Logic:

// Simplified code generation process
class Rollup {
  generate() {
    // 1. Create code generator
    // 2. Generate module code
    - // 3. Handle output options
  }
}

// Simplified code generation process
class Rollup {
  generate() {
    // 1. Create code generator
    // 2. Generate module code
    - // 3. Handle output options
  }
}

Rollup’s ES Modules Optimization

ESM Optimization Strategies:

1. Static Analysis Optimization:
   • Leverages ESM’s static nature for aggressive optimization.
   • Source: rollup/src/ast/
2. Scope Hoisting:
   • The Scope class manages variable scopes.
   • Source: rollup/src/Scope.js
3. Tree Shaking Enhancement:
   • More precise detection of unused code.
   • Source: rollup/src/Bundle.js

Key Optimization Points:

// Simplified ESM optimization example
class Bundle {
  generate() {
    // 1. Identify pure functions
    // 2. Mark unused exports
    // 3. Generate more optimized code
  }
}

// Simplified ESM optimization example
class Bundle {
  generate() {
    // 1. Identify pure functions
    // 2. Mark unused exports
    // 3. Generate more optimized code
  }
}

Vite Modular Source Code

ESM-Based Development Server Source Code

Development Server Core Source Code:

1. ESM Server Implementation:
   • @vitejs/plugin-vue processes Vue single-file components.
   • Source: packages/vite/src/node/plugins/
2. File System Routing:
   • The resolve function handles file path resolution.
   • Source: packages/vite/src/node/resolver.ts
3. HMR Implementation:
   • The hmr module manages hot updates.
   • Source: packages/vite/src/node/hmr.ts

Key Code Example:

// Simplified ESM server startup
async function startServer() {
  // 1. Create HTTP server
  // 2. Set up ESM middleware
  // 3. Handle file requests
}

// Simplified ESM server startup
async function startServer() {
  // 1. Create HTTP server
  // 2. Set up ESM middleware
  // 3. Handle file requests
}

On-Demand Compilation and Hot Update Source Code

On-Demand Compilation Process:

1. Request Interception:
   • transformMiddleware handles file transformations.
   • Source: packages/vite/src/node/server/transform.ts
2. Caching Mechanism:
   • transformCache caches transformation results.
   • Source: packages/vite/src/node/server/transform.ts
3. HMR Updates:
   • handleHMRUpdate processes module updates.
   • Source: packages/vite/src/node/hmr.ts

Key Implementation Logic:

// Simplified on-demand compilation process
async function transformRequest(url) {
  // 1. Check cache
  // 2. Transform file
  // 3. Return result
}

// Simplified on-demand compilation process
async function transformRequest(url) {
  // 1. Check cache
  // 2. Transform file
  // 3. Return result
}

Rollup Bundling Integration Source Code

Production Build Integration:

1. Rollup Configuration Generation:
   • The build command generates Rollup configurations.
   • Source: packages/vite/src/node/build.ts
2. Plugin Integration:
   • Vite plugins are converted to Rollup plugins.
   • Source: packages/vite/src/node/plugins/
3. Output Handling:
   • writeBundle manages final output.
   • Source: packages/vite/src/node/build.ts

Key Code Example:

// Simplified production build process
async function build() {
  // 1. Generate Rollup configuration
  // 2. Execute Rollup bundling
  // 3. Handle output files
}

// Simplified production build process
async function build() {
  // 1. Generate Rollup configuration
  // 2. Execute Rollup bundling
  // 3. Handle output files
}

Module Caching Mechanism Source Code

Module Caching Implementation:

1. In-Memory Caching:
   • moduleGraph manages module dependency relationships.
   • Source: packages/vite/src/node/server/moduleGraph.ts
2. File System Caching:
   • The cache directory stores transformation results.
   • Source: packages/vite/src/node/server/transform.ts
3. Cache Invalidation:
   • File watching and hash validation.
   • Source: packages/vite/src/node/server/transform.ts

Key Implementation Logic:

// Simplified caching mechanism
class ModuleGraph {
  // 1. Track module dependencies
  // 2. Manage cache state
  // 3. Handle cache invalidation
}

// Simplified caching mechanism
class ModuleGraph {
  // 1. Track module dependencies
  // 2. Manage cache state
  // 3. Handle cache invalidation
}

Vite’s Performance Optimization Source Code

Core Performance Optimizations:

1. Pre-Compiling Dependencies:
   • optimizeDeps pre-builds node_modules.
   • Source: packages/vite/src/node/optimizer/index.ts
2. Request Merging:
   • mergeRequests consolidates similar requests.
   • Source: packages/vite/src/node/server/transform.ts
3. Lazy Loading Optimization:
   • On-demand loading for dynamic imports.
   • Source: packages/vite/src/node/server/transform.ts

Key Optimization Code:

// Simplified dependency pre-compilation process
async function optimizeDeps() {
  // 1. Analyze dependency graph
  // 2. Pre-build node_modules
  // 3. Cache build results
}

// Simplified dependency pre-compilation process
async function optimizeDeps() {
  // 1. Analyze dependency graph
  // 2. Pre-build node_modules
  // 3. Cache build results
}

Comparative Analysis and Summary

Core Differences Between the Three Tools

Insights from Source Code Architecture

1. Webpack:
   • Complex plugin system and hook mechanism.
   • Robust dependency graph construction.
   • Suitable for large, complex applications.
2. Rollup:
   • Simple architectural design.
   • Focused on ESM and Tree Shaking.
   • Ideal for library development.
3. Vite:
   • Leverages browser-native ESM.
   • Separates development and production architectures.
   • Suitable for modern web application development.

By deeply understanding the source code implementations of these tools, developers can better leverage their features, address modularization challenges in real-world projects, and perform customized development when necessary.