前端進階（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許可證）