13-webpack tree sharking

tree sharkingはwebpackの内蔵機能であるため、生産モードではデフォルトでオープンしています.ここでは検証デモのみを行います.
一、概要
1.1機能
tree sharkingは、JavaScriptコンテキストの未参照コード(dead-code)の除去を記述する用語である.これは、ES2015モジュール文法の静的構造特性、例えばimportおよびexportに依存する.
1.2意味
アプリケーションをツリーに想像する.緑の葉は、実際に使用されているソースコードとLibrary(ライブラリ)は、木の木の葉です.枯れ葉はコードを引用していないことを表しています.秋の木の枯れ葉です.死んだ木の葉を除去するためには、この木を揺すって落下させなければなりません.
二、共通モジュールの追加
srcディレクトリにcomon.jsを追加し、内容を編集します.

export function funcA() {
    console.log("  A");
}

export function funcB() {
    console.log("  B");
}

三、index.jsを編集する

import { funcA } from './common.js';
//       Hello webpack ! div  
function component() {
    let element = document.createElement('div');
    element.innerHTML = "Hello webpack !";
    //  funcA
    console.log("funcA",funcA());
    return element;
}
//    div     body  
document.body.appendChild(component());

四、webpack.co.nfig.jsを編集する.
4.1 modeをnoneに設定する

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode:"none",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

コンパイルされたメーン.jsの内容

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "funcA", function() { return funcA; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "funcB", function() { return funcB; });
function funcA() {
    console.log("  A");
}

function funcB() {
    console.log("  B");
}

funcBは使われていませんが、コンパイルされました.
4.1 modeをdevelopmentに設定する

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode:"development",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

コンパイルされたメーン.jsの内容は、common.jsの内容についてです.

/***/ "./src/common.js":
/*!***********************!*\
  !*** ./src/common.js ***!
  \***********************/
/*! exports provided: funcA, funcB */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"funcA\", function() { return funcA; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"funcB\", function() { return funcB; });
function funcA() {
    console.log(\"  A\");
}

function funcB() {
    console.log(\"  B\");
}

//# sourceURL=webpack:///./src/common.js?");

/***/ }),

コードフォーマット後

/***/ "./src/common.js":
/*!***********************!*\
  !*** ./src/common.js ***!
  \***********************/
/*! exports provided: funcA, funcB */
(function(module, __webpack_exports__, __webpack_require__) {

    "use strict";
    eval("__webpack_require__.r(__webpack_exports__);" +
        "/* harmony export (binding) */ " +
        "__webpack_require__.d(" +
            "__webpack_exports__, \"funcA\", function() { return funcA; });" +
        "/* harmony export (binding) */" +
        " __webpack_require__.d(__webpack_exports__, \"funcB\", function() { return funcB; });" +
        "function funcA() {" +
            "console.log(\"  A\");" +
        "}" +
        "function funcB() {" +
            "console.log(\"  B\");" +
        "}" +
        "//# sourceURL=webpack:///./src/common.js?");
})

まだ明らかにFncBは使用されていませんが、コンパイルされています.
4.3 modeをプロデュースに設定する

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode:"production",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

コンパイルされたメーン.jsの内容は圧縮されます.再フォーマット後、common.jsの内容について:

([function (e, t, n) {
    "use strict";
    n.r(t), document.body.appendChild(function () {
        let e = document.createElement("div");
        return e.innerHTML = "Hello webpack !", console.log("funcA", void console.log("  A")), e
    }())
}]);

現在はfuncAしか見られません.funcBに関する内容はありません.
终わります
この特定の例では、多くは減少していないように見えるが、ツリーに複雑な依存性を持つ大型アプリケーションでtree shkingを実行すると、bundleに著しい体積最適化が生じる.
参照リンク

tree-sharking

コード例