Use Dynamic Dead Code Elimination to super-minify your code.
this is just a POC, use at your own risk
Your web apps use a lot of libraries, and you probably don't use every piece of every library. So why should you ship all of that code when your users won't run all of it?
You don't have to ship it all! Enter uncoverage
.
Just write an exhaustive automated run-through of your app, then generate a
coverage.json
. coverage.json
tells uncoverage
which code you're using, and which code is
just dead weight.
This is still in development, so these instructions only show how to compare the size of the demo bundle before and after removing unused code.
-
First install the global and local dependencies:
npm install -g browserify istanbul exorcist dalek
npm install
-
Open your terminal and run
npm run start &
. This will run the coverage collecting server. This will receive the coverage results from the run, and then save them into acoverage.json
. -
Next, run
npm run flow
in the terminal. This will build an instrumented bundle to collect coverage, then run the app in Chrome automagically, then send the coverage to the server. Thenuncoverage
will remove the code that your app doesn't use! -
Now run
npm run bundle
to generatedemo-app/bundle.js
with a standard minification process. We will use this standard bundle to compare with the uncoveraged bundle. -
Compare the size of the uncoveraged
demo-app/bundle.min.js
and the standarddemo-app/bundle.js
. Try usingls -lh demo-app
from the project root. -
Stand in awe of how wicked-awful this idea is!
Integrating with uncoverage
has two steps:
-
Generating
coverage.json
-
Removing dead code which
coverage.json
indicates was not run.
To accomplish the first step, use istanbul
to instrument your app with extra coverage-detecting code.
# This example uses a browserify bundle,
# but it doesn't have to be one
istanbul instrument demo-app/bundle.unins.js > demo-app/bundle.js"
Then, run your app using the instrumented package instead of the usual un-instrumented code. And here is the tricky part: it is essential that you run through each and every use case, or uncoverage
will remove the code for use cases that are not run.
You should automate this process with a tool like selenium
or dalek
.
When you run your instrumented app manually, you can access the coverage data in the console. It's stored as the global variable window.__coverage__
by default.
To automatically save coverage data, use a collecting server for the test runner to phone home to. See uncoverage/server.js
and uncoverage/demo-app/dalek.js
for sample details.
Now that coverage.json
is saved, uncoverage
can free our users from dead code.
Again, a browserify
transform is available, but the package can be used directly in code.
// Use it in code ...
var fs = require('fs');
var uc = require('uncoverage');
var uninstrumented = 'bundle.unins.js';
var coverage = 'coverage.json';
fs.writeFileSync('bundle.min.js', uc(uninstrumented, coverage));
# ... or in browserify
browserify bundle.unins.js -t [ uncoverage/transform --coverage overage.json ] -o bundle.min.js