webpack 的 scope hoisting 是什么？

or0fun 發布于2019-08-23 15:22 / 1971人閱讀

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

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

scope hoisting 是 webpack3 的新功能，直譯過來就是「作用域提升」。熟悉 JavaScript 都應該知道「函數提升」和「變量提升」，JavaScript 會把函數和變量聲明提升到當前作用域的頂部。「作用域提升」也類似于此，webpack 會把引入的 js 文件“提升到”它的引入者頂部。

接下來嘗試在 webpack4 使用這個功能，對比啟用前后的打包區別，相信你一定能很快理解他的作用。

啟用插件

在 webpack4 中使用 scope hoisting，需要添加 ModuleConcatenationPlugin（模塊關聯）插件：

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

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

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

文件準備

現在已經在開發環境添加上 scope hoisting。但是因為我們希望測試文件引入效果的不同，所以需要添加 4 個文件。

// 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,
}

文件間的引用關系是這樣的：

文件都準備好了，立即運行 node_modules/.bin/webpack --mode development 打包文件。

這就是 scope hoisting

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

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

      // 關聯 ./src/shouldImport.js 模塊
      let sth = "something you need"
      /* es6 默認引入 */ var shouldImport = {
        others: ""
      }

      // 關聯 ./src/one.js 模塊
      let a = shouldImport
      /* es6 默認引入 */ var one = a

      // 關聯 ./src/two.js 模塊
      let two_a = shouldImport
      /* es6 默認引入 */ var two = two_a

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

正常來說 webpack 的引入都是把各個模塊分開，通過 __webpack_require__ 導入導出模塊（對原理不熟悉的話可以看這里），但是使用 scope hoisting 后會把需要導入的文件直接移入導入者頂部，這就是所謂的 hoisting。

可以看出，這么優化后：

代碼量明顯減少

減少多個函數后內存占用減少

不用多次使用 __webpack_require__ 調用模塊，運行速度也會得到提升

當然幾時你開啟了 scope hoisting，webpack 也不會一股腦地把所有東西都堆砌到一個模塊。官網對這個問題也清楚地說明了，這里舉個例子，在你使用非 ES6 模塊或使用異步 import() 時，不會應用作用域提升，模塊依然會拆分開，不過具體代碼會跟正常的引入有一點差異。

GPU云服務器云服務器 scope是什么意思 webpack是什么 webpack的作用 hoist

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101938.html

webpack2 示例之：Scope Hoisting 和 Code Splitting

摘要：原文鏈接譯者這個示例演示了與代碼拆分相結合的。這是示例的依賴圖實線表示同步導入，虛線表示異步導入除之外的所有模塊都是模塊。為了避免沖突，模塊中的模塊連接標識符被重命名，并簡化了內部導入。根模塊的外部導入和導出使用現有的結構。原文鏈接：https://github.com/webpack/we...譯者：@justjavac 這個示例演示了與代碼拆分相結合的 Scope Hoistin...

chunquedong 2019-08-20 18:52 評論0 收藏0
Webpack 最佳實踐總結(三)

摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業務邏輯開發流程需要經過預處理器如或，然后再經過后處理器如進行深加工。還未看的，可以點擊查看上兩篇文章喲：Webpack 最佳實踐總結(一)、Webpack 最佳實踐總結(二) 好了，這篇是第三篇，也是完結篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會讓你失望的整合 CSS 加工流有時候，前端項目中除了 JavaScript ...

pkhope 2019-08-20 18:53 評論0 收藏0
Webpack 最佳實踐總結(三)

摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業務邏輯開發流程需要經過預處理器如或，然后再經過后處理器如進行深加工。還未看的，可以點擊查看上兩篇文章喲：Webpack 最佳實踐總結(一)、Webpack 最佳實踐總結(二) 好了，這篇是第三篇，也是完結篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會讓你失望的整合 CSS 加工流有時候，前端項目中除了 JavaScript ...

jerryloveemily 2019-08-29 13:13 評論0 收藏0
性能優化篇---Webpack構建代碼質量壓縮

摘要：運行構建帶上可追蹤到的工作只能正確的分析出如何剔除死代碼，需要接入處理剔除配置見上開啟即作用域提升在構建過程中，會借助模塊化的靜態特性，確定模塊的依賴關系，將一個中的靜態依賴提升到頂部。 Webpack構建速度優化基本優化完畢，接下來考慮的就是：線上代碼質量的優化，即如何使用webpack構建出高質量的代碼 Webpack構建流程：初始化配置參數 -> 綁定事件鉤子回調 -> 確...

KunMinX 2019-08-23 16:22 評論0 收藏0