1. 函数的解析方式

lazy parsing 懒解析 vs eager parsing 饥饿解析

() 括号包裹函数，告诉解析器这是一个 eager parsing 饥饿解析。

如果知道该函数在解析期间会被调用，则使用 eager parsing，如果不调用，使用 lazy parsing。因为使用立刻会被调用的情况下，如果使用 lazy parsing，会导致之前的优化无效，还需要重新反优化，增加时间。

压缩的过程中，（）会被去掉，通过 optimize.js 来解决

2. 代码实例

2.1 创建test.js 文件

// test.js
export default () => {
    const add = (a, b) => a*b; //
    const num1 = 1;
    const num2 = 2;
    add(num1, num2);
}

2.2 打包test.js

我们使用webpack 对上面代码进行打包为了方便定位，进行下面的配置，把test.js 打包到单独的文件中

2.3 打包出来的结果

2.4 实际项目中的时常

2.5 代码解读

// test.js
export default () => {
    const add = (a, b) => a*b; // 懒解析，这里先记住函数，并不进行解析
        
    // 让add 函数 饥饿解析的方式 如下
    // const add = ((a, b) => a*b); // 饥饿解析
    
    const num1 = 1;
    const num2 = 2;
    add(num1, num2);
}

实际webpack 打包压缩(Uglify)的过程中，会把我们的括号去掉，就不能进行饥饿解析了

### ParalleUglifyPlugin 多进程代码压缩

3. 利用Optimize.js优化初次加载时间

github.com/nolanlawson…

可以把压缩后的省略的括号找回来

Usage

optimize-js input.js > output.js

Example input:

!function (){}()
function runIt(fun){ fun() }
runIt(function (){})

Example output:

!(function (){})()
function runIt(fun){ fun() }
runIt((function (){}))

官方给的速度提升的数据

Browser	Typical speed boost/regression using optimize-js
Chrome 55	20.63%
Edge 14	13.52%
Firefox 50	8.26%
Safari 10	-1.04%

4. 重要

后面webpack4 包括 Uglify，已经把上面的(括号省略等)问题处理了。

可能更早的项目需要做一些兼顾。

性能优化之函数优化