Keepfast 是前端乙個效能分析工具

2021-10-07 13:36:52 字數 1416 閱讀 2061

keepfast 是乙個效能分析工具,能夠分析**的資源構建效能和頁面效能,生成效能報告並提供優化建議,讓效能監控更方便。

主要特性:

訪問此頁面可檢視效能報告效果:

npm install -g lighthouse @gitee/keepfast
先為你的專案建立配置檔案:

# 進入你的專案目錄

cd /path/to/your/repo

# 初始化配置檔案

keepfast init

然後修改 keepfast.config.js 配置檔案,完善 repository 字段資訊,如果你的專案是由 vue cli 建立和管理的,剩下的配置內容保持原樣即可。

執行效能測試並將報告輸出到 ./report.json 檔案中:

keepfast report ./report.json
上傳報告會呼叫 gitee api,為了讓 keepfast 有許可權操作你的倉庫,你需要提供乙個私人令牌,它可在設定 > 私人令牌 頁面中生成,生成後執行以下命令新增環境變數:

export gitee_api_access_token=你的私人令牌
之後執行以下命令上傳報告:

keepfast upload ./report.json
gitee go 是 gitee 推出的 ci/cd(持續構建與整合)服務,使用者可以通過自定義構建流程,實現構建整合自動化。

在你的倉庫的 master 分支上新建流水線檔案,使用如下配置:

name: keepfast

displayname: keepfast

triggers:

push:

branches:

- master

- develop

steps:

- step: npmbuild@1

name: npm-build

displayname: npm-build

inputs:

nodeversion: 12.7

goals: >-

yum clean all

yum install -y epel-release

yum -y update

yum install -y chromium

npm config set registry

export gitee_api_access_token=你的私人令牌

export sass_binary_site=

npm install

npm install -g lighthouse @gitee/keepfast

keepfast report ./report.json

keepfast upload ./report.json

記 vue 表單的乙個效能問題

產品反饋表單頁太卡了,這是乙個有意思的情況,讓我看看。如圖所見,當在 input 輸入資料的時候,連續輸入會感覺明顯的延遲。那個專案最多情況下,表單數量達到千數。筆者在 demo 裡簡化實現,並把表單數量提公升到 10000,把下面的 貼上執行一邊就能得到卡頓效果。眾所周知,vue2 裡的資料使用 ...

如何寫出乙個效能優化的單例模式

單例模型是面試當中最常見的一種設計模式,它是一種物件建立模式,用於產生乙個物件的具體例項,可以確保系統中乙個類只產生乙個例項。簡而言之,單例模式可以帶來兩個好處 1 對於頻繁使用到的物件,可以節省反覆建立物件花費的時間 2 減少物件的例項化操作,故而可以降低系統記憶體的使用頻率 根據以上兩點,可看出...

深搜的乙個性質

我們將每個節點的起始時間和結束時間對映到乙個時間軸上,正如圖二所示。括號引理 從a點的時間跨度範圍來看,如果我們經過深搜後能夠找到圖二所示的一棵樹 藍線和紅線所包圍的那棵 那麼在這棵樹中,任何乙個祖先的時間跨度範圍都會完完全全的包含其後代的時間跨度範圍 反之,任何乙個後代的時間跨度範圍都會完完全全的...