前端进阶（9） - js 性能优化利器：prepack

js 性能优化利器：prepack

1. js 性能优化

js 性能优化不外乎从三个角度入手：

1.1 开发者在编写程序时，尽可能避免没必要要的冗余代码，包括冗余的第三方库

首先要避免没必要要的冗余代码，包括没必要要的闭包、没必要要的变量与函数声明、没必要要的模块分割等。

好比：

// 低效的实现
const urlParams = (() => {
  const params = {};
  if (location.search) {
    location.search.slice(1).split('&').forEach(item => {
      const arr = item.split('=');
      params[arr[0]] = arr[1] || '';
    });
  }
  
 return params;
})();


// 更高效的实现
const urlParams = {};
if (location.search) {
  location.search.slice(1).split('&').forEach(item => {
    const arr = item.split('=');
    urlParams[arr[0]] = arr[1] || '';
  });
}

其次是要避免使用没必要要的第三方库，由于通常第三方库都很大，功能比较多，在条件容许的状况下，尽可能少用。

好比：

const users = [
  { user: 'barney',  age: 36, active: true },
  { user: 'fred',    age: 40, active: false },
  { user: 'pebbles', age: 1,  active: true },
];

// 使用 lodash
import _ from 'lodash';

const user = _.find(users, { age: 1, active: true });


// 不使用 lodash
const user = users.find(item => item.age === 1 && item.active === true);

还好比：

• You-Dont-Need-jQuery: 一些 jquery 的替代性解决方案
• You-Dont-Need-JavaScript: 一些使用原生 css 动画替代原有的 js 动画的解决方案
• You-Dont-Need-Lodash-Underscore: 一些 lodash、underscore 的替代性解决方案
• You-Dont-Need-Momentjs: 一些 moment 的替代性解决方案

本质上讲，这些都是从开发者编码的角度来优化的，但这种方式也是颇有限的，由于不少时候咱们不得不大量的使用第三方库，来提高开发效率。

1.2 使用扁平化代码构建的构建工具

如今前端打包基本上都会用 webpack，但 webpack 打包以后的文件会产生不少冗余代码，这会致使 js 性能下降。

若是在打包文件的性能上有特别需求的小伙伴，能够使用 rollup，详细使用与对比能够参考这里 webpack 以外的另外一种选择：rollup.

1.3 代码预编译

js 自己是没有像 python 同样的预编译功能，更没有像 java 同样的编译功能，因此，这里所说的 js 代码预编译 只是经过工具实现的相似功能而已。

这就要提到 prepack 了，它的思路大体是这样：

把不依赖外部环境的逻辑提早进行运算，并把运算结果替换到相应的源码处，而后从源码中移除这段逻辑。

2. prepack

2.1 安装

npm install -g prepack

2.2 编译（打印在命令行）

prepack script.js

2.3 编译后输出文件

prepack script.js --out script-processed.js

2.4 示例

源代码

(() => {
  const secondsOfOneDay = 24 * 60 * 60;

  window.getSecondsOfDays = days => days * secondsOfOneDay;
})();

编译后的代码

(function () {
  var _$0 = this;

  var _1 = days => {
    return days * 86400;
  };

  _$0.getSecondsOfDays = _1;
}).call(this);

2.5 配合构建工具一块儿使用

• prepack-webpack-plugin: A webpack plugin for Prepack
• rollup-plugin-prepack: A Rollup plugin for Prepack
• prepack-vscode: A Visual Studio code plugin for Prepack

2.6 问题

• 目前最新版本是 0.2.51，还一直在开发中，不少功能都尚未实现，包括模块输入输出的优化

3. 后续

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）