移除用不到的程式碼

在本程式碼研究室中,您將透過 移除任何未使用和不需要的依附元件。

應用程式螢幕截圖

測量

建議先評估網站成效 以及新增最佳化項目

  • 如要預覽網站,請按下「查看應用程式」。然後按下 全螢幕 全螢幕

快按一下您最愛的小貓吧!Firebase 即時資料庫是 因此分數會即時更新 與應用程式的其他使用者保持同步🐈

  1. 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  2. 按一下 [網路] 分頁標籤。
  3. 勾選「停用快取」核取方塊。
  4. 重新載入應用程式。

原始套件大小:992 KB

為了載入這個簡易應用程式,系統準備了將近 1 MB 的 JavaScript 程式碼!

請查看開發人員工具中的專案警告。

  • 然後點選「Console」分頁標籤。
  • 確認 WarningsFilter 輸入。

警告篩選器

  • 查看系統顯示的警告。

控制台警告

Firebase 是這個應用程式中使用的其中一個程式庫 您好,傳送警告,通知開發人員不要匯入 但僅包含使用的元件。也就是說 您可從這個應用程式中移除未使用的程式庫,以便載入應用程式

在某些情況下也會使用特定程式庫,但可能會有一些 改用更簡單的替代方式移除不需要的程式庫的概念是 稍後會深入介紹

分析套件

應用程式有兩個主要依附元件:

  • Firebase:這個平台提供多種 提供實用的服務,像是 iOS、Android 或網頁應用程式即時報表 資料庫 即時儲存並同步處理每隻小貓的資訊。
  • Moment.js:這個公用程式庫可簡化 處理日期以 JavaScript 編寫的日期。每個小貓的出生日期都會儲存在 Firebase 資料庫,moment 則會使用週數計算年齡。

為何兩個依附元件會導致將近 1 MB 的組合大小?您可以產生 其中一個原因在於,任何依附元件 因此,如果各個 Pod 的深度/分支範圍皆超過兩個 依附元件「樹狀結構」。對應用程式來說 內含許多依附元件,速度會更快。

分析套裝組合,以更加瞭解實際情況。建立機器學習模型時 運用社群建立的各種工具達成此目標,例如 webpack-bundle-analyzer

這項工具的套件已以 devDependency 的形式在應用程式中加入應用程式中。

"devDependencies": {
  //...
  "webpack-bundle-analyzer": "^2.13.1"
},

這表示該程式碼可直接在 webpack 設定檔中使用。 請在 webpack.config.js 的開頭匯入以下內容:

const path = require("path");

//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

現在,請將其新增為 plugins 陣列中檔案結尾的外掛程式:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
};

應用程式重新載入後,畫面上應該會顯示 而非應用程式本身

Webpack Bundle 分析工具

這不像看著某些小貓 修正問題,卻非常有幫助。 將滑鼠遊標懸停在任何套件上,就會顯示其大小以三個 方法如下:

統計資料大小 大小尚未壓縮或壓縮。
剖析後的大小 編譯後,套件中的實際套件大小。 第 4 版 webpack (在此應用程式用) 中減去了 也就是自動編譯過的檔案 這也是為什麼統計資料小於統計顯著程度 大小
Gzip 壓縮大小 使用 gzip 編碼壓縮的套件大小。這個 有關這個主題,請參閱其他指南。

透過 webpack-bundle-analyzer 工具,您可以更輕鬆地識別未使用或 其中含有大量不需要的套件。

移除未使用的套件

圖表顯示 firebase 套件包含許多其他 而非只是資料庫其中包括下列其他套件:

  • firestore
  • auth
  • storage
  • messaging
  • functions

這些都是 Firebase 提供的優質服務 (您可以參考 說明文件 ,但應用程式並沒有使用它們,所以 現在可以匯入所有資料了

如要再次查看應用程式,請還原 webpack.config.js 中的變更:

  • 從外掛程式清單中移除 BundleAnalyzerPlugin
plugins: [
  //...
  new BundleAnalyzerPlugin()
];
  • 現在,請從檔案頂端移除未使用的匯入內容:
const path = require("path");

//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

應用程式現在應可正常載入。修改 src/index.js 以更新 Firebase 匯入。

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

現在,應用程式重新載入時,不會顯示開發人員工具警告。開啟 開發人員工具「網路」面板也會顯示「大幅」縮減套件大小:

套裝組合大小縮減至 480 KB

移除組合大小超過一半。Firebase 提供多種 並讓開發人員選擇只納入 。這個應用程式中,只有 firebase/database 用於儲存及同步處理資料 所有資料firebase/app 匯入,用來設定 每項不同的服務都是必要的

其他許多熱門程式庫 (例如 lodash) 也可讓開發人員 選擇性匯入套件的不同部分若不花太多心思 更新應用程式中的程式庫匯入內容,僅納入目前使用的 大幅提高效能

雖然套裝組合大小縮減幅度很大,但還是有更多 工作!😈

移除不需要的套件

與 Firebase 不同,匯入 moment 程式庫的部分無法如 但也許可以完全移除?

每隻可愛小貓的生日都會以 Unix 格式 (毫秒) 儲存, Firebase 資料庫

以 Unix 格式儲存的出生日期

這是特定日期和時間的時間戳記, 時間則是從世界標準時間 1970 年 1 月 1 日 00:00 算起的毫秒數。如果現行 可以使用相同格式計算日期和時間,或是尋找 可能只是養成每週小貓幾週的年齡。

一如往常,請不要按照這裡的指示複製和貼上。開始日期 從 src/index.js 的匯入內容中移除 moment

import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';

有一個 Firebase 事件監聽器可處理資料庫中的值變更:

favoritesRef.on("value", (snapshot) => { ... })

在這個引數上方,加入一個小型函式來計算 指定的日期:

const ageInWeeks = birthDate => {
  const WEEK_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 7;
  const diff = Math.abs((new Date).getTime() - birthDate);
  return Math.floor(diff / WEEK_IN_MILLISECONDS);
}

在這個函式中,目前日期與目前日期之間的差距 (以毫秒為單位) 時間 (new Date).getTime() 和生日 (birthDate 引數,已經 以毫秒為單位計算各 100 毫秒 1 週。

最後,您可以透過以下方式,在事件監聽器中移除 moment 的所有例項: 改用這個函式:

favoritesRef.on("value", (snapshot) => {
  const { kitties, favorites, names, birthDates } = snapshot.val();
  favoritesScores = favorites;

  kittiesList.innerHTML = kitties.map((kittiePic, index) => {
    const birthday = moment(birthDates[index]);

    return `
      <li>
        <img src=${kittiePic} onclick="favKittie(${index})">
        <div class="extra">
          <div class="details">
            <p class="name">${names[index]}</p>
            <p class="age">${moment().diff(birthday, 'weeks')} weeks old</p>
            <p class="age">${ageInWeeks(birthDates[index])} weeks old</p>
          </div>
          <p class="score">${favorites[index]} ❤</p>
        </div>
      </li>
    `})
});

現在,請重新載入應用程式,然後再次查看「網路」面板。

套裝組合大小縮減至 225 KB

我們套裝組合中的商品數量再次減少了一半以上!

結論

在本程式碼研究室中,您將精通如何分析 瞭解為何此套件能有效移除未使用或不需要的套件 套件在您開始以這項技術最佳化應用程式之前,必須 但值得注意的是 應用程式

關於移除未使用的程式庫,請找出 是否使用套裝組合,以及不再使用的部分。尋找神秘偵探 似乎沒有在任何位置使用搭售包,請退一步然後確認 哪些頂層依附元件可能需要這個標記設法讓 並排出兩者的距離。

移除不需要的程式庫 變得複雜請務必與您的團隊密切合作,看看 可能可以簡化程式碼集的各個部分正在移除此檔案中的 moment 應用程式看起來可能很正確 是否需要使用時區和不同的語言代碼進行處理?或 如果有更複雜的日期操弄,該怎麼辦?一切可能 處理日期/時間以及 moment 等程式庫時會很棘手 和 date-fns 能大幅簡化這項作業。

權衡利弊,值得您衡量 導入自訂解決方案的複雜度和力度 第三方程式庫