webpack之ツリーシェイク

（1）背景

私たちのコードでは、一部のコードは書かれているが呼び出されたり実行されたりしていませんが、たとえば、関数またはモジュールは定義されていますが、導入または呼び出されていません。現時点では、導入または呼び出されていないモジュールおよび関数を希望します。 webpackでパッケージ化しないでください。これにより、パッケージ化の時間とメモリを節約できます。ツリーシェイクとは、ツリーをシェイクすることを意味します。ツリーをシェイクすると、無駄な葉がいくつか削除されます。これがツリーシェイクの意味です。

注：ツリーシェイクはESモジュールでのみ使用できます。つまり、インポートモジュールの導入のみをサポートし、requireの導入は適用されません。

（2）ツリーシェイク構成

最初に小さな例を書いてください：

number.js：

function number () {
  var count = 0
  var dom = document.createElement('div')
  dom.innerHTML = count
  dom.onclick = function () {
    count++
    dom.innerHTML = count
  }
  document.body.appendChild(dom)
}

function add (a, b) {
  return a + b
}

export {
  number,
  add
}

index.js：

import { number } from './number'
number()

numberメソッドのみが使用され、addメソッドは使用されていないことがわかります。この時点で、npx webpackがパッケージ化されており、ファイルのこの部分を確認できます。

次に、Tree Shakingを使用してパッケージ化し、最初にTreeShakingを構成します

最初にモードモードを構成してから、プラグインと同じレベルで次のコードを記述します。

optimization: {
    usedExports: true
  }

Tree Shakingは、どこにでもエクスポートされ、package.jsonで構成されたモジュールに使用されることを示します。この構成項目は、TreeShakingを必要としないことを意味します。

"sideEffects": false,

npx webpackを再度パックすると、パックされたファイルが見つかり、行を追加します

モードが開発環境の場合、パッケージ化されたファイルは使用されるメソッド/モジュールをマークし、未使用のモジュールは開発環境でのデバッグを容易にするために引き続きパッケージ化されます。

（2）生産環境

実稼働環境で構成できる場所は2つだけです

最初：webpack.config.jsで

mode: 'production',

package.jsonの場合：たとえば、cssはツリーシェイクを必要としません

"sideEffects": [
    "*.css"
  ],

2つの手順が完了したら、再度パックできます。追加機能ではなく、番号機能のみが存在することがわかります。

総括する：

（1）モードが開発環境の場合、パッケージ化されたファイルは使用されたメソッド/モジュールをマークし、未使用のモジュールは開発環境でのデバッグを容易にするために引き続きパッケージ化されます。

（2）モードが実稼働環境の場合、package.jsonで「sideEffects」を設定するだけで、他の設定実稼働環境は手動設定なしで自動的に設定されます。

おすすめ