成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端進(jìn)階（9） - js 性能優(yōu)化利器：prepack

JouyPub / 2853人閱讀

摘要：性能優(yōu)化利器性能優(yōu)化性能優(yōu)化不外乎從三個(gè)角度入手開發(fā)者在編寫程序時(shí)，盡量避免不必要的冗余代碼，包括冗余的第三方庫首先要避免不必要的冗余代碼，包括不必要的閉包不必要的變量與函數(shù)聲明不必要的模塊分割等。

js 性能優(yōu)化利器：prepack 1. js 性能優(yōu)化

js 性能優(yōu)化不外乎從三個(gè)角度入手：

1.1 開發(fā)者在編寫程序時(shí)，盡量避免不必要的冗余代碼，包括冗余的第三方庫

首先要避免不必要的冗余代碼，包括不必要的閉包、不必要的變量與函數(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] || "";
  });
}

其次是要避免使用不必要的第三方庫，因?yàn)橐话愕谌綆於己艽?，功能比較多，在條件允許的情況下，盡量少用。

比如：

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)化的，但這種方式也是很有限的，因?yàn)楹芏鄷r(shí)候我們不得不大量的使用第三方庫，來提升開發(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

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97807.html

相關(guān)文章

  • 前端進(jìn)階（14） - 如何提升前端性能和響應(yīng)速度

    摘要：一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積，達(dá)到提高響應(yīng)速度的目的。如果你的項(xiàng)目不需要處理靜態(tài)資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。 如何提升前端性能和響應(yīng)速度 下面大多是從前端工程化的角度給出的優(yōu)化建議，如果需要了解語法上的優(yōu)化，可以參考： 如何提高頁面加載速度 編寫高效的JavaScript Web前端性能優(yōu)化進(jìn)階 - 完結(jié)篇 1. 原生...

    lylwyy2016 評論0 收藏0

  • 前端進(jìn)階（14） - 如何提升前端性能和響應(yīng)速度

    摘要：一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積，達(dá)到提高響應(yīng)速度的目的。如果你的項(xiàng)目不需要處理靜態(tài)資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。 如何提升前端性能和響應(yīng)速度 下面大多是從前端工程化的角度給出的優(yōu)化建議，如果需要了解語法上的優(yōu)化，可以參考： 如何提高頁面加載速度 編寫高效的JavaScript Web前端性能優(yōu)化進(jìn)階 - 完結(jié)篇 1. 原生...

    Airy 評論0 收藏0

  • 阿里云前端周刊 - 第 24 期

    摘要：版本發(fā)布近日發(fā)布的版本中引入了許多新的特性，并且能夠更好地與協(xié)同開發(fā)。阿里云前端工程化工具正式開源取黎明破曉之意，原為阿里云業(yè)務(wù)運(yùn)營團(tuán)隊(duì)內(nèi)部的前端構(gòu)建和工程化工具，現(xiàn)已完全開源。 推薦 1. Firefox 引入 Headless 模式 https://developer.mozilla.org... 類似于 Chrome 的 Headless 模式，現(xiàn)在 Firefox 也引入了 H...

    lncwwn 評論0 收藏0

  • 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁響應(yīng)速度、餓

    摘要：前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁響應(yīng)速度餓了么升級實(shí)踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁響應(yīng)速度、餓了么PWA 升級實(shí)踐 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請與InfoQ中文站聯(lián)系。從屬于筆...

    liuchengxu 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會不定期更...

    princekin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<