关于前端:Tree-shaking原理及应用

Tree shaking 原理及利用

概念

Tree shaking 字面意就是“摇树”，通过摇树将树上枯黄的叶子摇落，在我的项目开发中，咱们会依照模块划分的形式将代码组织起来，tree shaking 的作用是把我的项目中没必要的代码全副抖落掉，打消被援用，删除没被调用的无用模块代码，该优化最终实现的是代码体积的缩小，也属于我的项目性能优化的一部分。

Tree shaking 晚期由 rollup 实现，前期 webpack2 也减少了 Tree shaking 的性能，在 webpack 中，Tree shaking 指的就是按需加载，即没有被援用的模块不会被打包进来，缩小咱们的包大小，放大利用的加载工夫，出现给用户更佳的体验。

原理

Tree Shaking 在去除代码冗余的过程中，程序会从入口文件登程扫描所有的模块依赖，以及模块的子依赖，而后将它们链接起来造成一个“形象语法树”(AST)。随后，运行所有代码，查看哪些代码是用到过的，做好标记。最初，再将“形象语法树”中没有用到的代码“摇落”。经验这样一个过程后，就去除了没有用到的代码。

Tree Shaking 实现的要害得益于 ES Module 模块的动态剖析（Static module resolution）性能。那么什么是动态剖析呢？

动态剖析

在 ES Module 中，咱们能够将模块的加载分为两个阶段：动态剖析 和编译执行；

<img src=”https://tva1.sinaimg.cn/large/007S8ZIlly1gjnjerytkuj30fi0c8gm5.jpg” alt=”image-20201013111828842″ style=”zoom:50%;” />

所谓动态剖析，即在代码执行前就能对整体代码依赖调用关系等进行剖析读取；

上面咱们看下 ES Module 的个性：

1. 只能作为模块顶层的语句呈现（而不嵌套在条件语句中）
2. import 的模块名只能是字符串常量（只对文件进行字符串读取）
3. 导入和导出语句没有动静局部（不容许应用变量等）

在 ES6 中，实现了齐全动态的导入语法：import，这也意味着上面的导入是不可行的：

// 报错，不可嵌套在条件语句中
// 动态分析阶段代码未编译执行，拿不到该变量
if(condition) {import foo from "foo";} else {import bar from "bar";}

// 报错，不可应用表达式
import {'f'+'oo'} from 'module1';

咱们只能通过导入所有的包后再进行条件获取，如下：

import foo from "foo";
import bar from "bar";

if(condition) {// foo.xxxx} else {// bar.xxx}

ES Module的 import 语法完满能够应用tree shaking，因为能够在代码不运行的状况下就能剖析出不须要的代码。

不同于 ES Module，CommonJS 反对动静加载模块，在加载前是无奈确定模块是否有被调用，所以并不反对tree shaking。

if(condition) {myDynamicModule = require("foo");
} else {myDynamicModule = require("bar");
}

ES6 modules 这些设计尽管灵活性不如 CommonJS 的 require，但却保障了 ES6 modules 的依赖关系是确定 (deterministic) 的，和运行时的状态无关，从而也就保障了 ES6 modules 是 能够进行牢靠的动态剖析的。

咱们晓得 webpack 自身是一个插件的汇合，那么 tree shaking 性能又是哪些插件来实现的呢？

目前集成 tree shaking 性能的插件有以下几种：

• UglifyJS
• webpack-rollup-loader
• Babel Minify Webpack Plugin

利用

上面咱们看下官网文档解释：

webpack 2 正式版本内置反对 ES2015 模块（也叫做 harmony modules）和未应用模块检测能力。新的 webpack 4 正式版本扩大了此检测能力，通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提醒，表明我的项目中的哪些文件是 “pure(纯正 ES2015 模块)”，由此能够平安地删除文件中未应用的局部。

配置形式：

1、sideEffects 副作用

pakeage.json 文件增加 sideEffects 配置，排除非 es module 类型模块，防止产生副作用；

如果所有代码都不蕴含 side effect，咱们就能够简略地将该属性标记为 false，来告知 webpack，它能够平安地删除未用到的 export。

sideEffects 更为无效 是因为它容许跳过整个模块 / 文件和整个文件子树。

{
  "name": "webpack-app",
  "version": "1.0.0",
  "description": "webpack app description",
  "main": "","sideEffects": ["*.scss"]
}

2、.babelrc 文件

在应用 babel 编译时，默认会将模块编译成 CommonJS，将 modules 设置为false，防止将 ES Module 模块类型转换

{
  "presets": [
    [
        "es2015",
        {"modules": false}
    ]
  ]
}

运行实例

上面是 webpack+babel 实现 tree shaking 的例子：

// helpers.js
export function foo() {return 'foo';}
export function bar() {return 'bar';}

// main.js
import {foo} from './helpers';

let elem = document.getElementById('output');
elem.innerHTML = `Output: ${foo()}`;

未配置应用 tree shaking：

Babel es2015，中蕴含插件transform-es2015-modules-commonjs，它的作用是将 es2015 代码转换成 commonjs，这样一来，就失去了动态解析的根本条件

// .babelrc 文件
{presets: ['es2015'],
}

编译后，输入的 helpers 模块代码：

function(module, exports) {

    'use strict';

    Object.defineProperty(exports, "__esModule", {value: true});
    exports.foo = foo;
    exports.bar = bar;
    function foo() {return 'foo';}
    function bar() {return 'bar';}

}

如上代码，咱们能够看到是同时 exports 导出了 foo 和 bar；

配置 tree shaking：

编译后，输入的 helpers 模块代码，只有 foo 模块被导出了，然而还是存在 bar 办法：

function(module, exports, __webpack_require__) {/* harmony export */ exports["foo"] = foo;
  /* unused harmony export bar */;
  function foo() {return 'foo';}
  function bar() {return 'bar';}
 }

通过代码压缩过后，才真正实现了无用代码的剔除：

function (t, n, r) {function e() {return "foo"}
  n.foo = e
}

总结

通过以上解说，咱们理解到为了实现在我的项目中利用 tree shaking，须要具备以下几个条件：

• 应用 ES2015 模块语法（即 import 和 export）。
• 确保没有编译器将的 ES2015 模块语法转换为 CommonJS 的（顺带一提，这是当初罕用的 @babel/preset-env 的默认行为）。
• 在我的项目的 package.json 文件中，增加 "sideEffects" 属性。
• 应用 mode 为 "production" 的配置项以启用更多优化项，包含压缩代码与 tree shaking。

以后 tree shaking 技术还不是很成熟，在解决冗余代码时会往往会因为副作用而不能很好的实现代码的精简，在日常的代码编写中还是须要咱们缩小冗余，晋升代码品质。