Category: Build Tools

webpack 3 just shipped with a feature called "scope hoisting" that makes bundles smaller and faster. The technical improvement is modest—5-15% bundle size reduction in practice—but the symbolism is significant. webpack is acknowledging that bundle size matters, and the ecosystem is finally taking performance seriously.

What Is Scope Hoisting?

Scope hoisting (via the ModuleConcatenationPlugin) changes how webpack wraps modules. Previously, webpack wrapped each module in a function:

// webpack 2 output (simplified)
[
  function(module, exports) {
    // your module code
    var foo = require('./other');
  },
  function(module, exports) {
    // other module
    module.exports = 'bar';
  }
]

Each module gets its own scope. This is safe but bloated—lots of function wrappers and runtime overhead.