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;
}

将mode配置选项设置为开发以确保未缩小捆绑包：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
- }
+ },
+ mode: 'development',
+ optimization: {
+   usedExports: true
+ }
};

webpack.config.js
接着，更新入口脚本，使用其中一个新方法，并且为了简单，将 lodash 删除：

src/index.js

- import _ from 'lodash';
+ 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 ，


square它没有被导入，但它仍然包含在捆绑包中。为啥咧？