webpack 的 scope hoisting 是什么？

原文：https://segmentfault.com/a/1190000018220850

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

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

啟用插件

在 webpack4 中使用 scope hoisting，需要添加 ModuleConcatenationPlugin（模塊關聯(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()],
  }
}

文件準備

現(xiàn)在已經在開發(fā)環(huán)境添加上 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__)

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

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

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

      // 關聯(lián) ./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。

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

• 代碼量明顯減少

• 減少多個函數(shù)后內存占用減少

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

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

推薦閱讀

1. CSS變量對JS交互組件開發(fā)帶來的提升與變革
   

2. Vue scoped與深度選擇器deep的原理

3. 如何做到在 Markdown 中使用 Vue 語法
   

4. 【深入vue】為什么Vue3.0不再使用defineProperty實現(xiàn)數(shù)據(jù)監(jiān)聽？

5. 帶你五步學會Vue SSR

6. Vue3 新增API

7. Vue Router history模式的配置方法及其原理

??愛心三連擊
1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。
2.關注公眾號前端名獅，回復「1」加入前端交流群，一起學習進步！
3.也可添加微信【qq1248351595】，一起成長。

“在看轉發(fā)”是最大的支持