12、webpack構築--未参照コードの除去(tree sharking)

tree sharking は、JavaScriptコンテキストから除外された未参照コード(dead-code)を記述する用語です.ES 2015モジュールシステムの静的構造特性に依存しています.例えば、 import 和 exportこの用語と概念は実際にES2015モジュールのパッキングツールとして興味津々です. rollup
 
新しいwebpack 4の正式バージョンは、この検出能力を拡張しています. package.json の 「sideEffects」 属性はタグとして、complerに提示され、プロジェクトの中のどのファイルが「ピュア(純粋なES 2015モジュール)」であるかを示すことにより、ファイルに未使用の部分を安全に削除することができます.
 
1、共通モジュールを追加
私達のプロジェクトに新しい共通モジュールファイルを追加します. src/match.jsは、このファイルから二つの関数を導出します.

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

2、src/index.jsを変更し、その中の一つの方法を引用する.

import { cube } from './math.js';

  function component() {
   var element = document.createElement('pre');
   element.innerHTML = [
     'Hello webpack!',
     '5 cubed is equal to ' + cube(5)
   ].join('

');
   
    return element;
  }
document.body.appendChild(component());

注意してください. src/math.js モジュール内 import インポート スクウェア 方法.この機能はいわゆる「未引用コード」です.つまり、参照されていないものは削除すべきです. export
3、告知工事は副作用がないので、スクウェアを導入しなくてもいいです.package.jsonを修正します.

{
  "name": "your-project",
  "sideEffects": false
}