Experiment: Remove unused CSS/JS using RUM Code Coverage
MIT License
Experiment: Remove unused CSS/JS using RUM Code Coverage.
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
http-server test/input/
yarn ts-node test/run.ts
http-server -p 8081 test/output/
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;