Experiment: Remove unused CSS/JS using RUM Code Coverage.
- 🤔 New research project.
- 😬 Nowhere near ready.
- 💀 Not clear if it's even to be possible/practical.
- Run Puppeteer against a running web app.
- Use the application as a real user would.
- Collect CSS and JS Coverage reports from the Browser.
- Remove CSS and JS which was never used.
- Fail to recreate a real world action and/or device characteristic and you will delete code which is needed, and break your app.
- Huge maintenance burden to try to replicate the above.
-
If Code Coverage could be added to the Real User Metrics which Browser Vendors collect already, that data could potentially be used to drive tools like this one.
-
Collect Coverage during your eg. Cypress or Playwright tests.
With a thorough test suite you could get decent sense of its coverage, but still far from all the possible things a user might do.
git clone https://github.com/JamieMason/doei.git
yarn install
- Start a server for the test web page to be optimised:
http-server test/input/
- Open another Terminal
- Run Doei
yarn ts-node test/run.ts
- Start a server to display the optimised web page:
http-server -p 8081 test/output/
- Compare the optimised page with the original.
Keep only source which falls within the
CoverageEntry.ranges[]
.
The CSS approach does not work as blindy removing ranges of code can create syntax errors, for example:
- const alwaysOne = 1 || "impossible case"
+ const alwaysOne = 1 ||
So the code is run through a Babel Transform at src/babel/plugin.ts.
/**
* Start Puppeteer and collect Coverage data while
* your user actions are being performed.
*/
function instrument(
performUserActions: RunSuite
): Promise<CoverageReport>;
/**
* Remove unused code from the given `CoverageReport`.
*/
function optimise(
coverageByType: CoverageReport,
options: Options,
): Promise<OptimisationResult[]>;
/**
* Write the files contained within the given
* optimisation result to disk.
*/
function replaceOriginals(
result: OptimisationResult[],
): Promise<OptimisationResult[]>;
/**
* Format and display the given optimisation
* result as a table.
*/
function logResult(
results: OptimisationResult[]
): void;