webpackのscope hoistingは何ですか?

原文のリンク:https://ssshooter.com/2019-02...
scope hoistingはwebpack 3の新しい機能で、直訳すれば「作用域向上」です.JavaScriptに詳しいなら、「関数アップ」と「変数アップ」を知るべきです.JavaScriptは関数と変数宣言を現在のスコープのトップに引き上げます.「スコープアップ」もこれに似ています.webpackは導入したjsファイルをその導入者のトップにアップグレードします.
次はwebpack 4でこの機能を使ってみてください.有効前後のパッケージとの違いを比較して、彼の役割をすぐに理解できると思います.
プラグインを有効にする
webpack 4で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もすべてのものをモジュールに積み上げません.公式サイトでは、この問題についても明確に説明していますが、ここでは例を挙げて、非ES 6モジュールを使ったり、非同期importを使ったりした場合、アプリケーションの機能が向上しません.モジュールは依然として分解されますが、具体的なコードは正常な導入とは少し違います.