This is a TO-DO app build with react, styled with sass and provides audit for Performance, Accessibility
SEO, Best-practices with Google's Lighthouse CLI integration.
This app also provides budgeting with size-limit integration of 1.5 s of threshold. Bundle can be analyze
by source-map-explorer.
This TO-DO react app provides integration with lighthouse and report for audits based on various categories.
Reports are provided in .json, .html format.
- Add a task
- See the list - pending, completed tasks
- Mark your pending tasks completed
- removed the completed tasks
App state is managed with useReducer hook, a custom hook is built using useReducer
to manage state at single point
and provides dispatch actions for performing various updates to state.
Resets and variables are created under styles folder.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Config for lighthouse can be found under lighthouse/config/config.js
reports can be found under lighthouse/reports/----
1. initial.(all) -> these were the reports generated initially
Runs the lighthouse script
and opens the report in browser.
"lighthouse http://localhost:5000 --config-path=./lighthouse/config/config.js --output json --output html --output-path ./lighthouse/reports/initial --quiet --view --chrome-flags=--headless"
http://localhost:5000 - url on which we need to see the metrics.
Configuration
--config-path=./lighthouse/config/config.js
-> Default config can be found here
--output json --output html --output-path ./lighthouse/reports/initial ->
--output json --output html
-> generates report in json and html format
--output-path
-> generates report at the path specific
--quiet
->
If you want the report to run silently you can use the following argument
--view
->
With the “view” argument, your report opens in a chrome window once after it has finished running
--chrome-flags=--headless
->
If you don’t want the Chrome browser pop-up to open we need to provide this argument
--extra-headers=./lighthouse/config/custom-headers.json
->
At times, there are some custom headers that are required to be send in http request, these
can be override by this argument
source-map-explorer
is used as a bundle analyzer as it shows tree map visualization.
Analyze and debug JavaScript code through source maps.
Runs the analyze script
and opens the tree map in browser.
size-limit
to budget the app.
Runs the analyze script
and shows report as below for pass & fail respectively.
Time limit: 1.5 s
Size: 43.4 KB
Loading time: 868 ms on slow 3G
Running time: 446 ms on Snapdragon 410
Total time: 1.4 s
Total time limit has exceeded
Time limit: 1 s
Size: 43.4 KB
Loading time: 868 ms on slow 3G
Running time: 398 ms on Snapdragon 410
Total time: 1.3 s
Type | Description | URL |
---|---|---|
Lighthouse Developer API | This is an API reference for Lighthouse. | Google Docs |
Lighthouse CLI Configuration | Configurations explained for Lighthouse CLI. | Repo's README.md File |
Lighthouse Code repo | GIT repo link to Lighthouse. | Github Repo |
Lighthouse Scoring & Terms Explained | Docs link which can explain insights about how scores are calculated. | Repo's README.md File |
Chrome Flags | List of Chromium Command Line Switches --headless used at the top. | Link to refer Chrome Flags |
source-map-explorer | details about the package, scripts & arguments to refer. | Link to refer NPM package |