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 文件确实被压缩了，但和官方文档有所出入，具体是什么原因呢？