{"id":25931169,"url":"https://github.com/hcvazquez/uffremover","last_synced_at":"2025-03-03T23:58:17.441Z","repository":{"id":57385023,"uuid":"77060041","full_name":"hcvazquez/UFFRemover","owner":"hcvazquez","description":"[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 approach leads to applications being shipped with significant portions of code that are actually not used, which unnecessarily inflates the JavaScript bundles and could slow down website loading because of the extra unused code. The goal of this paper is to address the problem of reducing the size of bundle files in JavaScript applications.","archived":false,"fork":false,"pushed_at":"2018-10-18T16:31:39.000Z","size":27142,"stargazers_count":17,"open_issues_count":2,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-03T23:57:42.088Z","etag":null,"topics":["javascript","maintenance","nodejs","web-optimization","web-performance"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hcvazquez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-21T14:46:50.000Z","updated_at":"2023-03-02T13:50:32.000Z","dependencies_parsed_at":"2022-08-28T14:52:07.114Z","dependency_job_id":null,"html_url":"https://github.com/hcvazquez/UFFRemover","commit_stats":null,"previous_names":["hcvazquez/uffoptimizer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcvazquez%2FUFFRemover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcvazquez%2FUFFRemover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcvazquez%2FUFFRemover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcvazquez%2FUFFRemover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hcvazquez","download_url":"https://codeload.github.com/hcvazquez/UFFRemover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241758968,"owners_count":20015248,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","maintenance","nodejs","web-optimization","web-performance"],"created_at":"2025-03-03T23:58:16.664Z","updated_at":"2025-03-03T23:58:17.434Z","avatar_url":"https://github.com/hcvazquez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![UFF Image](http://fs5.directupload.net/images/170302/d5zleuc5.png)\n# UFFRemover\n\nUFFRemover is a slimming JavaScript tool for identifying and removing unused foreign functions (UFF).\n\n## Installation\n\nUFFRemover is developed using Node.js execution environment (\u003e= v6.1.0). The following steps are needed for running the tool:\n\n#### 1. Install Node.js environment\nNode.js can be downloaded from (https://nodejs.org)\n\n#### 2. Download the project from github\n\n    git clone git://github.com/hcvazquez/UFFRemover.git\n    cd UFFRemover\n\n#### 3. Install the project dependencies\n\n    npm install\n\n## Optimization\n\n#### 1. Go to the path of the project to optimize\n\n\u003e 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.\n\nFor Example:\n\tcd [project_to_optimize_path]\n\n#### 2. Instrument your js code using the following command\n\n\tnode [UFF_path] instrument_file [file_to_instrument]\n\nFor Example:\n\tnode ../../UFFRemover instrument_file bundle.js\n\n\u003e This step generates a new file, e.g. bundle-instrumented.js\n\nIn math.js example:\n\n![image](https://github.com/hcvazquez/UFFRemover/blob/master/experiment/img/instrument.png)\n\n#### 3. Replace original file with instrumented file\n\nTo generate profiling info you need to replace in your site the original file with the instrumented file.\n\nFor Example:\nReplace\n\t\u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e\nWith\n\t\u003cscript src=\"bundle-instrumented.js\"\u003e\u003c/script\u003e\n\nIn math.js example:\n\n![image](https://github.com/hcvazquez/UFFRemover/blob/master/experiment/img/replace-instrumented.png)\n\n#### 5. Generate profiling info\n\nYou need to run your application and use it. This step print profiling information about used functions into the browser console.\n\n#### 6. Save the browser console output into a file\n\nFor this step, you need to open the browser console and save the content into a txt file.\n\n\u003e Note: In Chrome, please check that \"info\" logging level is enable. ![image](https://github.com/hcvazquez/UFFRemover/blob/master/experiment/img/hide_all.png)\n\nIn math.js example:\n\n![image](https://github.com/hcvazquez/UFFRemover/blob/master/experiment/img/profiling.png)\n\n#### 7. Now, you can use the registered information to optimize your application\n\nHow the optimizations works?\nThe 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.\n\n\u003e Note: The file to optimize needs to be the original file.\n\nYou can optimize your original file as follow.\n\n\tnode [UFF_path] optimize_file_browser [file_to_optimize] [profiling_file]\n\nFor Example:\n\n\tnode ../../UFFRemover optimize_file_browser bundle.js profiling.txt\n\n\u003e This step generates a new file, e.g. bundle-optimized.js\n\nIn math.js example:\n\n![image](https://github.com/hcvazquez/UFFRemover/blob/master/experiment/img/optimization.png)\n\n#### 8. Test your optimization file\n\nTo test your optimized file you need to replace in your site the original file with the optimized file.\n\nFor Example:\n\nReplace\n\n\t\u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e\n\nWith\n\n\t\u003cscript src=\"bundle-optimized.js\"\u003e\u003c/script\u003e\n\nVERY 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.\n\n\u003e 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').\n\nIn math.js example:\n\n![image](https://github.com/hcvazquez/UFFRemover/blob/master/experiment/img/replace-optimized.png)\n\n\nAlso you can test the UFFs that were cropped from the bundle.\n\nFor example, in the math.js experiment you can try (in your page, or in the browser developer console):\n\n\tmath.multiply(math.eye(1000, 1000, 'sparse'), math.eye(1000, 1000, 'sparse'));\n\nYou should not see any error.\n\nIf you want to see that functions were loaded lazily, you must put in the browser developer console the code:\n\n\twindow.uffs\n\n![image](https://github.com/hcvazquez/UFFRemover/blob/master/experiment/img/testing-optimization.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcvazquez%2Fuffremover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhcvazquez%2Fuffremover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcvazquez%2Fuffremover/lists"}