前端进阶（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许可证）