webpack之Scope Hoisting

最新推荐文章于 2025-05-27 09:30:38 发布

原创最新推荐文章于 2025-05-27 09:30:38 发布 · 564 阅读

1 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文深入解析了webpack的ScopeHoisting特性，阐述了其如何通过作用域提升减少代码体积和内存开销，以及在生产环境下的默认启用机制。同时，文章对比了开启前后的代码结构变化，介绍了ScopeHoisting的原理和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们先来简单分析一下：（没有开启Scope Hoisting ）

现象：构建后的代码存在大量的闭包代码

[
  (function (module, __webpack_exports__, __webpack_require__) {
    var __WEBPACK_IMPORTED_MODULE_0__util_js__ = __webpack_require__(1);
    console.log(__WEBPACK_IMPORTED_MODULE_0__util_js__["a"]);
  }),
  (function (module, __webpack_exports__, __webpack_require__) {
    __webpack_exports__["a"] = ('Hello,Webpack');
  })
]

问题

大量函数闭包包裹代码，导致体积增大（模块越多越明显）
运行代码时创建的函数作用域变多，内存开销变大

在讨论Scope Hoisting之前，我们先来了解一下什么是Scope Hoisting? 它有什么作用？

Scope Hoisting 它可以让webpack打包出来的代码文件更小，运行更快，它可以被称作为 "作用域提升"。是在webpack3中提出来的，当然现在webpack4也是支持的。

开启Scope Hoisting之后：

[
  (function (module, __webpack_exports__, __webpack_require__) {
    var util = ('Hello,Webpack');
    console.log(util);
  })
]

结论：

打包出来的是一个IIFE（匿名闭包）
modules是一个数组，每一项是一个模块初始化函数
_webpack——require用来加载模块，返回module.export
通过WEBPACK_REQUIRE_METHOD(0)启动程序

scope hoisting原理

原理：将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突

对比：通过scope hoisting可以减少函数声明代码和内存开销

使用：

webpack mode为production默认开启（手动加入插件，防止代码压缩）

es6语法,cjs不支持

 plugins: [
      // 开启 Scope Hoisting 功能
      new webpack.optimize.ModuleConcatenationPlugin()
  ]

简单理scope hoisting就是把多个作用域用一个作用域取代，以减少内存消耗并减少包裹块代码，从每个模块有一个包裹函数变成只有一个包裹函数包裹所有的模块，但是有一个前提就是，当模块的引用次数大于1时，比如被引用了两次或以上，那么这个效果会无效，也就是被引用多次的模块在被webpack处理后，会被独立的包裹函数所包裹