webpack之Scope Hoisting

我们先来简单分析一下：（没有开启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处理后，会被独立的包裹函数所包裹