12、webpack构建--移除未引用代码(tree shaking )

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。

 

新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 "pure(纯的 ES2015 模块)"，由此可以安全地删除文件中未使用的部分。

 

1、添加一个通用模块

在我们的项目中添加一个新的通用模块文件 src/math.js，此文件导出两个函数

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

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

2、更改src/index.js,引用其中一个方法

import { cube } from './math.js';

  function component() {
   var element = document.createElement('pre');
   element.innerHTML = [
     'Hello webpack!',
     '5 cubed is equal to ' + cube(5)
   ].join('\n\n');
   
    return element;
  }
document.body.appendChild(component());

注意，我们并未从 src/math.js 模块中 import 导入 square 方法。这个功能是所谓的“未引用代码(dead code)”，也就是说，应该删除掉未被引用的 export。

3、告知工程是无副作用，可以不用导入square，修改package.json

{
  "name": "your-project",
  "sideEffects": false
}