Skip to content

[A novel JavaScript code optimizer] A common practice in JavaScript development is to ship and deploy an application as a large file, called bundle, which is the result of combining the application code along with the code of all the libraries the application depends on. Despite the benefits of having a single bundle per application, this approa…

License

Notifications You must be signed in to change notification settings

hcvazquez/UFFRemover

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UFF Image

UFFRemover

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

Installation

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)

2. Download the project from github

git clone git://github.com/hcvazquez/UFFRemover.git
cd UFFRemover

3. Install the project dependencies

npm install

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

node [UFF_path] instrument_file [file_to_instrument]

For Example: node ../../UFFRemover instrument_file bundle.js

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

In math.js example:

image

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 <script src="bundle.js"></script> With <script src="bundle-instrumented.js"></script>

In math.js example:

image

5. Generate profiling info

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

6. 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. image

In math.js example:

image

7. 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.

node [UFF_path] optimize_file_browser [file_to_optimize] [profiling_file]

For Example:

node ../../UFFRemover optimize_file_browser bundle.js profiling.txt

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

In math.js example:

image

8. 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:

image

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

image

About

[A novel JavaScript code optimizer] A common practice in JavaScript development is to ship and deploy an application as a large file, called bundle, which is the result of combining the application code along with the code of all the libraries the application depends on. Despite the benefits of having a single bundle per application, this approa…

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published