demo9源码地址
    什么是Tree Shaking?
    字面意思是摇树。项目中没有使用的代码会在打包的时候丢掉。JS的Tree Shaking依赖的是ES6的模块系统（比如：import和export）
    项目目录如下：
    image.png
    在util.js文件中写入测试代码

    1. // util.js
    2. export function a(){
    3.     return 'this is function a'
    4. }
    6. export function b(){
    7.     return 'this is a function b'
    8. }
    10. export function c(){
    11.     return 'this is a function c'
    12. }

    在 app.js 中引用 util.js 的 function a() 函数，按需引入：

    1. // app.js
    2. import {a} from './vendor/until'
    3. console.log(a)

    命令行运行webpack打包后，打开打包后生成的/dist/app.bundle.js文件。查找我们a()函数输出的字符串，如下图所示：
    image.png
    如果将查找内容换成this is function "c" 或者 this is function "b", 并没有相关查找结果。
    说明JS Tree Shaking成功。
    1.如何处理第三方JS库？
    对于经常使用第三方库（例如jQuery，lodash等等），如何实现Tree Shaking？
    下面以lodash.js为例，进行介绍

    安装lodash.js：npm install lodash —save

    在app.js中引入lodash.js的一个函数：

    // app.js
import { chunk } from 'lodash'
console.log(chunk([1, 2, 3], 2))

    命令行打包。如下图所示，打包后大小是70kb。显然，只是引用了一个函数，不应该这么大。并没有进行Tree Shaking。
    image.png
    开头讲过，js tree shaking利用的是ES的模块系统。而lodash.js使用的是CommonJS 而不是ES6的写法。所以，安装对应的模块系统即可。

    安装lodash.js的ES写法的版本：npm install lodash-es —save

    修改下app.js:

    // app.js
import { chunk } from 'lodash-es'
console.log(chunk([1, 2, 3], 2))

    在次打包，打包结果只有3.5KB（如下图所示）。显然，tree shaking成功。
    image.png

    在一些对加载速度敏感的项目中使用第三方库，请注意库的写法是否符合ES模块系统规范，一方面webpack进行tree shaking。