UFFRemover

UFFRemover is a slimming JavaScript tool for identifying and removing unused foreign functions (UFF).

Example from http://mathjs.org/examples/basic_usage.js.html

Installation

Attention: UFFRemover only supports ES5!

UFFRemover is developed using Node.js execution environment (>= v6.1.0). The following steps are needed for running the tool:

1. Install Node.js environment

Node.js can be downloaded from (https://nodejs.org)

3. Install the UFFRemover node module

npm install uffremover -g

Optimization

1. Go to the path of the project to optimize

If you don't have one, you can try downloading the Math.js experiment example from https://github.com/hcvazquez/ExperimentExample and following the instructions to run a local server.

For Example: cd [project_to_optimize_path]

2. Instrument your js code using the following command

uff instrument_file [file_to_instrument]

For Example: uff instrument_file bundle.js

This step generates a new file, e.g. bundle-instrumented.js

3. Replace original file with instrumented file

To generate profiling info you need to replace in your site the original file with the instrumented file.

For Example: Replace With

In math.js example:

4. Generate profiling info

You need to run your application and use it. This step print profiling information about used functions into the browser console.

5. Save the browser console output into a file

For this step, you need to open the browser console and save the content into a txt file.

Note: In Chrome, please check that "info" logging level is enable.

In math.js example:

6. Now, you can use the registered information to optimize your application

How the optimizations works? The optimization removes the UFFs functions from the js file optimized. All the functions removed are listed in a folder created by the tool called "uff" in the same folder in which the optimized file is located. To avoid potential runtime errors owing to functions removed wrongly, UFFRemover replace the functions with an AJAX synchronous call that dinamically load the function from the server in case of need it.

Note: The file to optimize needs to be the original file.

You can optimize your original file as follow.

uff optimize_file_browser [file_to_optimize] [profiling_file]

For Example:

uff optimize_file_browser bundle.js profiling.txt

This step generates a new file, e.g. bundle-optimized.js

7. Test your optimization file

To test your optimized file you need to replace in your site the original file with the optimized file.

For Example:

Replace

<script src="bundle.js"></script>

With

<script src="bundle-optimized.js"></script>

VERY IMPORTANT! Additionally, in the place where the file was optimized, the optimizer has created an "uff" folder with all optimized functions inside it. You also need to deploy that folder on the server so that the asynchronous load can find the functions.

Note: Please check that the application has access to the "uff" folder. The ajax call will try to load the functions from the root. The path to the file look like this: $dl ('uff/$_-7697924661507122750048.js').

In math.js example:

Also you can test the UFFs that were cropped from the bundle.

For example, in the math.js experiment you can try (in your page, or in the browser developer console):

math.multiply(math.eye(1000, 1000, 'sparse'), math.eye(1000, 1000, 'sparse'));

You should not see any error.

If you want to see that functions were loaded lazily, you must put in the browser developer console the code:

window.uffs

Instrument in a Production Environment

To generate log information in a production environment UFFRemover uses google analytics and registers the use of functions as events.

You need to run the next command:

uff instrument_file_ga [file_to_optimize]

And, change in your Google Analytics code snippet the variable name 'ga' to '_$ga'

We decided change the variable name to avoid conflicts with other variables with the same name.

An example of GA code snippet is the following

<script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','_$ga');
      _$ga('create', 'YOUR CODE', 'auto');//your code example UA-132123123-1
      _$ga('send', 'pageview');
</script>

Note: In the previous example '_$ga' appears three times.