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處理後，會被獨立的包裹函數所包裹