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它没有被导入，但它仍然包含在捆绑包中。为啥咧？