webpack 4 筆記六 關於tree shaking

tree shaking 是一個術語，通常用於描述移除 JavaScript 上下文中的未引用代碼(dead-code)

如果將應用程序比作一棵樹。
綠色表示實際用到的源碼和 library，是樹上活的樹葉。
灰色則表示無用的代碼(dead-code)，是秋天樹上枯萎的樹葉。
爲了除去死去的樹葉，你必須搖動這棵樹，使它們落下。

tree shaking 的原理可以參考Tree-Shaking性能優化實踐 - 原理篇。

下面，讓我們跟着官方文檔一起來碼

簡單實現

一、添加一個通用模塊

在我們的項目中添加一個新的通用模塊文件 src/math.js，此文件導出兩個函數
src/math.js

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

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

接着，更新入口腳本，使用其中一個新方法，並且爲了簡單，將 lodash 刪除：

src/index.js

- import _ from 'lodash';
- import './style.css';
+ import { cube } from './math.js';

 function component() {
-   var element = document.createElement('div');
+   var element = document.createElement('pre');

-   // lodash 是由當前 script 腳本 import 導入進來的
-   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.innerHTML = [
+     'Hello webpack!',
+     '5 cubed is equal to ' + cube(5)
+   ].join('\n\n');

   return element;
 }
...

命令行運行 npm run build 輸出 bundle.js ，理應是這樣的

實際卻是這樣的


bundle.js 文件確實被壓縮了，但和官方文檔有所出入，具體是什麼原因呢？