Why ESM Build Tools Like Snowpack and Vite Beat Webpack

Why bundling is needed

In JavaScript development, managing functions and variable scopes across large projects is crucial. Traditional module systems (CJS, AMD, UMD) cannot run directly in browsers, so bundlers like webpack emerged to transform modules into a single bundle.

Emergence of ESM‑based build tools

Tools such as Snowpack and Vite leverage native ESM support in modern browsers, allowing developers to run code without a full bundle. This reduces build complexity and speeds up development. <script src="index.js" type="module"></script> Adding type="module" tells the browser to treat the script as an ESM, constructing a dependency graph and handling module resolution natively.

Why they are faster

The two main reasons are:

Build complexity is O(1); changing a component only requires recompiling a single file.

Modules are loaded by the browser, eliminating duplicate network requests; non‑JS assets (images, CSS) can be served directly without additional compilation.

Performance comparison:

Build workflow

When a project imports third‑party modules, assets, or CSS, ESM‑based tools rewrite the import statements.

Third‑party: import React from 'react'; becomes import React from '/web_modules/react.js'; Image: import img from './img.png'; becomes import img from './img.png.proxy.js'; CSS: import './index.css'; becomes import './index.css.proxy.js'; Proxy files export the final asset URL, e.g.:

// img.png.proxy.js
export default '/dist/assets/img.png';

CSS proxy modules inject the stylesheet into the document at runtime.

Module Federation in Webpack 5

Webpack 5 introduces persistent caching and Module Federation (MF), enabling separate builds to expose and consume modules at runtime, similar to micro‑frontend architectures.

Key concepts:

Host: defines remotes to consume modules from other builds.

Remote: defines exposes to provide modules to other builds.

Example configuration:

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteRuntime',
      remotes: ['remote'],
      exposes: { './ComponentA': './src/components/A' },
      shared: ['react', 'react-dom'],
    })
  ]
};

Consumers import exposed modules with import ComponentA from 'remoteRuntime/ComponentA';.

Execution flow with MF

1. Load the main index.js bundle. 2. The bundle calls __webpack_require__('bootstrap.js'). 3. Bootstrap contains chunk information and resolves shared and remote modules. 4. After all dependencies are loaded, the application runs.

Comparison with other approaches

DLL bundles pre‑compile third‑party dependencies but require full rebuilds on changes and lack on‑demand loading.

Externals treat each dependency as a separate file, needing manual script ordering and also lacking on‑demand loading.

Conclusion

ESM‑based tools dramatically improve development startup speed, while Webpack remains a comprehensive enterprise solution offering deep customization. Combining MF with ESM concepts can provide both fast iteration and robust module sharing for large frontend projects.

Optimization before:

Optimization after:

MF diagram: