前端進階（9） - js 性能優化利器：prepack

JouyPub 發布于2019-08-23 11:59 / 2849人閱讀

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

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)

GPU云服務器云服務器前端性能優化前端開發性能優化 js性能優化 js進階視頻教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97807.html

前端進階（14） - 如何提升前端性能和響應速度

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

lylwyy2016 2019-08-29 17:04 評論0 收藏0
前端進階（14） - 如何提升前端性能和響應速度

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

Airy 2019-08-23 12:30 評論0 收藏0
阿里云前端周刊 - 第 24 期

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

lncwwn 2019-08-21 16:25 評論0 收藏0
前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓

摘要：前端每周清單第期支付寶前端構建工具發展用加快網頁響應速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領域內容，分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓了么PWA 升級實踐為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆...

liuchengxu 2019-08-20 16:23 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0