{"id":15965628,"url":"https://github.com/jamiemason/doei","last_synced_at":"2025-05-07T05:49:11.752Z","repository":{"id":65374941,"uuid":"579060407","full_name":"JamieMason/doei","owner":"JamieMason","description":"Experiment: Remove unused CSS/JS using RUM Code Coverage","archived":false,"fork":false,"pushed_at":"2022-12-18T16:09:22.000Z","size":263,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T05:49:03.400Z","etag":null,"topics":["code-coverage","minify-css","minify-javascript","puppeteer","real-user-metrics","tree-shaking","webperf"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JamieMason.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-16T15:01:22.000Z","updated_at":"2024-01-26T23:19:17.000Z","dependencies_parsed_at":"2023-01-29T19:31:09.956Z","dependency_job_id":null,"html_url":"https://github.com/JamieMason/doei","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fdoei","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fdoei/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fdoei/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fdoei/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JamieMason","download_url":"https://codeload.github.com/JamieMason/doei/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252823693,"owners_count":21809709,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-coverage","minify-css","minify-javascript","puppeteer","real-user-metrics","tree-shaking","webperf"],"created_at":"2024-10-07T17:42:48.604Z","updated_at":"2025-05-07T05:49:11.734Z","avatar_url":"https://github.com/JamieMason.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# doei\n\n\u003e Experiment: Remove unused CSS/JS using RUM Code Coverage.\n\n## Status\n\n- 🤔 New research project.\n- 😬 Nowhere near ready.\n- 💀 Not clear if it's even to be possible/practical.\n\n## General Idea\n\n1. Run [Puppeteer](https://pptr.dev/) against a running web app.\n1. Use the application as a real user would.\n1. Collect CSS and JS Coverage reports from the Browser.\n1. Remove CSS and JS which was never used.\n\n## Obvious Flaws\n\n1. Fail to recreate a real world action and/or device characteristic and you\n   will delete code which is needed, and break your app.\n1. Huge maintenance burden to try to replicate the above.\n\n## Possible Improvements\n\n1. If Code Coverage could be added to the Real User Metrics which Browser\n   Vendors collect already, that data could potentially be used to drive tools\n   like this one.\n1. Collect Coverage during your eg. [Cypress](https://www.cypress.io/) or\n   [Playwright](https://playwright.dev/) tests.\n\n   With a thorough test suite you could get decent sense of its coverage, but\n   still far from all the possible things a user might do.\n\n## Contributing\n\n### Install\n\n```\ngit clone https://github.com/JamieMason/doei.git\nyarn install\n```\n\n### Run Tool Locally\n\n1. Start a server for the test web page to be optimised:\n   ```\n   http-server test/input/\n   ```\n1. Open another Terminal\n1. Run Doei\n   ```\n   yarn ts-node test/run.ts\n   ```\n1. Start a server to display the optimised web page:\n   ```\n   http-server -p 8081 test/output/\n   ```\n1. Compare the optimised page with the original.\n\n### CSS Removal\n\nKeep only source which falls within the\n[`CoverageEntry.ranges[]`](https://pptr.dev/api/puppeteer.coverageentry.ranges).\n\n### JS Removal\n\nThe CSS approach does not work as blindy removing ranges of code can create\nsyntax errors, for example:\n\n```diff\n- const alwaysOne = 1 || \"impossible case\"\n+ const alwaysOne = 1 ||\n```\n\nSo the code is run through a [Babel](https://babeljs.io/) Transform at\n[src/babel/plugin.ts](src/babel/plugin.ts).\n\n## API\n\n```ts\n/**\n * Start Puppeteer and collect Coverage data while\n * your user actions are being performed.\n */\nfunction instrument(\n  performUserActions: RunSuite\n): Promise\u003cCoverageReport\u003e;\n\n/**\n * Remove unused code from the given `CoverageReport`.\n */\nfunction optimise(\n  coverageByType: CoverageReport,\n  options: Options,\n): Promise\u003cOptimisationResult[]\u003e;\n\n/**\n * Write the files contained within the given\n * optimisation result to disk.\n */\nfunction replaceOriginals(\n  result: OptimisationResult[],\n): Promise\u003cOptimisationResult[]\u003e;\n\n/**\n * Format and display the given optimisation\n * result as a table.\n */\nfunction logResult(\n  results: OptimisationResult[]\n): void;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamiemason%2Fdoei","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamiemason%2Fdoei","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamiemason%2Fdoei/lists"}