js 性能優(yōu)化利器：prepack
1. js 性能優(yōu)化
js 性能優(yōu)化不外乎從三個角度入手：
1.1 開發(fā)者在編寫程序時，盡量避免不必要的冗余代碼编兄，包括冗余的第三方庫
首先要避免不必要的冗余代碼碰煌，包括不必要的閉包、不必要的變量與函數(shù)聲明个少、不必要的模塊分割等洪乍。
比如：
// 低效的實(shí)現(xiàn)
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;
})();
// 更高效的實(shí)現(xiàn)
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 的替代性解決方案
本質(zhì)上講，這些都是從開發(fā)者編碼的角度來優(yōu)化的卸伞，但這種方式也是很有限的抹镊，因為很多時候我們不得不大量的使用第三方庫，來提升開發(fā)效率荤傲。
1.2 使用扁平化代碼構(gòu)建的構(gòu)建工具
現(xiàn)在前端打包基本上都會用 webpack垮耳，但 webpack 打包之后的文件會產(chǎn)生很多冗余代碼，這會導(dǎo)致 js 性能降低遂黍。
如果在打包文件的性能上有特別需求的小伙伴终佛，可以使用 rollup，詳細(xì)使用與對比可以參考這里 webpack 之外的另一種選擇：rollup.
1.3 代碼預(yù)編譯
js 本身是沒有像 python 一樣的預(yù)編譯功能雾家，更沒有像 java 一樣的編譯功能铃彰，所以，這里所說的 js 代碼預(yù)編譯 只是通過工具實(shí)現(xiàn)的類似功能而已榜贴。
這就要提到 prepack 了豌研，它的思路大致是這樣：
把不依賴外部環(huán)境的邏輯提前進(jìn)行運(yùn)算妹田，并把運(yùn)算結(jié)果替換到相應(yīng)的源碼處唬党，然后從源碼中移除這段邏輯。
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 配合構(gòu)建工具一起使用
- 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鬼佣，還一直在開發(fā)中驶拱，很多功能都還沒有實(shí)現(xiàn)，包括模塊輸入輸出的優(yōu)化
3. 后續(xù)
更多博客晶衷，查看 https://github.com/senntyou/blogs
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
