<abbr id="wg8si"></abbr>

<fieldset id="wg8si"></fieldset>

webpack 的 scope hoisting 是什么？

or0fun 發(fā)布于2019-08-23 15:22 / 1976人閱讀

摘要：原文鏈接是的新功能，直譯過(guò)來(lái)就是作用域提升。作用域提升也類似于此，會(huì)把引入的文件提升到它的引入者頂部。接下來(lái)嘗試在使用這個(gè)功能，對(duì)比啟用前后的打包區(qū)別，相信你一定能很快理解他的作用。

原文鏈接：https://ssshooter.com/2019-02...

scope hoisting 是 webpack3 的新功能，直譯過(guò)來(lái)就是「作用域提升」。熟悉 JavaScript 都應(yīng)該知道「函數(shù)提升」和「變量提升」，JavaScript 會(huì)把函數(shù)和變量聲明提升到當(dāng)前作用域的頂部。「作用域提升」也類似于此，webpack 會(huì)把引入的 js 文件“提升到”它的引入者頂部。

接下來(lái)嘗試在 webpack4 使用這個(gè)功能，對(duì)比啟用前后的打包區(qū)別，相信你一定能很快理解他的作用。

啟用插件

在 webpack4 中使用 scope hoisting，需要添加 ModuleConcatenationPlugin（模塊關(guān)聯(lián)）插件：

// webpack.config.js
const webpack = require("webpack")

module.exports = mode => {
  if (mode === "production") {
    return {}
  }

  return {
    devtool: "source-map",
    plugins: [new webpack.optimize.ModuleConcatenationPlugin()],
  }
}

文件準(zhǔn)備

現(xiàn)在已經(jīng)在開(kāi)發(fā)環(huán)境添加上 scope hoisting。但是因?yàn)槲覀兿Ｍ麥y(cè)試文件引入效果的不同，所以需要添加 4 個(gè)文件。

// shouldImport.js
export let sth = "something you need"

export default {
  others: "",
}

// one.js two.js 皆為此代碼
import other from "./shouldImport"
let a = other
export default a

// index.js
import one from "./one"
import two from "./two"

let test = "this is a variable"

export default {
  one,
  two,
  test,
}

文件間的引用關(guān)系是這樣的：

文件都準(zhǔn)備好了，立即運(yùn)行 node_modules/.bin/webpack --mode development 打包文件。

這就是 scope hoisting

這是打包文件的入口模塊部分：

{
    "./src/index.js": function(
      module,
      __webpack_exports__,
      __webpack_require__
    ) {
      "use strict"
      __webpack_require__.r(__webpack_exports__)

      // 關(guān)聯(lián) ./src/shouldImport.js 模塊
      let sth = "something you need"
      /* es6 默認(rèn)引入 */ var shouldImport = {
        others: ""
      }

      // 關(guān)聯(lián) ./src/one.js 模塊
      let a = shouldImport
      /* es6 默認(rèn)引入 */ var one = a

      // 關(guān)聯(lián) ./src/two.js 模塊
      let two_a = shouldImport
      /* es6 默認(rèn)引入 */ var two = two_a

      // 關(guān)聯(lián) ./src/index.js 模塊
      let test = "this is a variable"
      /* es6 默認(rèn)引入 */ var src = (__webpack_exports__["default"] = {
        one: one,
        two: two,
        test
      })
    }
  }

正常來(lái)說(shuō) webpack 的引入都是把各個(gè)模塊分開(kāi)，通過(guò) __webpack_require__ 導(dǎo)入導(dǎo)出模塊（對(duì)原理不熟悉的話可以看這里），但是使用 scope hoisting 后會(huì)把需要導(dǎo)入的文件直接移入導(dǎo)入者頂部，這就是所謂的 hoisting。

可以看出，這么優(yōu)化后：

代碼量明顯減少

減少多個(gè)函數(shù)后內(nèi)存占用減少

不用多次使用 __webpack_require__ 調(diào)用模塊，運(yùn)行速度也會(huì)得到提升

當(dāng)然幾時(shí)你開(kāi)啟了 scope hoisting，webpack 也不會(huì)一股腦地把所有東西都堆砌到一個(gè)模塊。官網(wǎng)對(duì)這個(gè)問(wèn)題也清楚地說(shuō)明了，這里舉個(gè)例子，在你使用非 ES6 模塊或使用異步 import() 時(shí)，不會(huì)應(yīng)用作用域提升，模塊依然會(huì)拆分開(kāi)，不過(guò)具體代碼會(huì)跟正常的引入有一點(diǎn)差異。