What are some ways to enhance Javascript performance using Closure Compiler while preserving function names?

Question

What are some ways to enhance Javascript performance using Closure Compiler while preserving function names?

Seeking a solution for using specific functions from a Javascript file (lib.js) in a webpage without loading the entire file.

I am looking to achieve this through command line scripting, but have not yet found a method that works as desired.

The content of lib.js:


        function dog() {
            return 'Fido';
        }

        function famous_human() {
            return 'Winston';
        }

        function human() {
            return famous_human();
        }

Code snippet calling functions from lib.js:


        alert(human());

Desired output in lib-compiled.js:


        function a() {return 'Winston';}
        function human() {return a();}

Function dog has been omitted due to non-usage.
Function famous_human has been optimized.
Function human retains its original name for external calling purposes.
No code included from the snippet code-calling-functions-in-lib.js

Seeking help on how to achieve this result with a simple approach. Is there an easy solution?

javascript google-closure-compiler

Answer 1

Answer №1

If you want to export a human:

function human() {
    return famous_human();
}

window['human'] = human;

For more details on exporting functions, visit this link

It's important to note that exporting symbols can prevent dead-code elimination, so it's recommended to keep project-specific exports in a separate file rather than including them in your library.

For example

Library Source - liba.js

function dog() {
  return 'Fido';
}

function famous_human() {
  return 'Winston';
}

function human() {
  return famous_human();
}

Project Specific Exports - project_exports.js

window['human'] = human;

Compilation command

java -jar compiler.jar \
  --compilation_level ADVANCED_OPTIMIZATIONS \
  --js liba.js \
  --js project_exports.js \
  --js project_source.js \
  --js_output_file project_compiled.js

Answer 2

If you want to export a human:

function human() {
    return famous_human();
}

window['human'] = human;

For more details on exporting functions, visit this link

It's important to note that exporting symbols can prevent dead-code elimination, so it's recommended to keep project-specific exports in a separate file rather than including them in your library.

For example

Library Source - liba.js

function dog() {
  return 'Fido';
}

function famous_human() {
  return 'Winston';
}

function human() {
  return famous_human();
}

Project Specific Exports - project_exports.js

window['human'] = human;

Compilation command

java -jar compiler.jar \
  --compilation_level ADVANCED_OPTIMIZATIONS \
  --js liba.js \
  --js project_exports.js \
  --js project_source.js \
  --js_output_file project_compiled.js

What are some ways to enhance Javascript performance using Closure Compiler while preserving function names?

Answer №1

For example

Library Source - liba.js

Project Specific Exports - project_exports.js

Compilation command

Similar questions

Developing dynamic 3D cubes

Render a component in certain routes based on specific conditions in React

Adjusting the height of content in Angular Material 2 md-tab

Conceal Pictures within Sources Section

Expanding Headers with JavaScript

The state in useState is failing to update correctly following selections made within the dropdown menus

Create an array of dynamically calculated properties from the Vuex state array, which can then be utilized in the v-model

Bootstrap popover fails to function without any visible errors

most efficient method of sharing information between various angular controllers

Effortlessly upload multiple dynamic files using Nest JS

Splitting Code in React Components using Webpack within a Ruby on Rails Application

There are no specified operations outlined in the Node.js Express documentation

Retrieve the value of a dropdown menu by referencing its name in JQuery

Guide to preventing dragging when resizing a card in React with the @dnd-kit/core library

Check that EACH radio button has been either selected or left unselected when the button is clicked

What is the best way to access a variable in one file and then utilize it in multiple other files?

Combatting repetitive code through the use of Redux toolkit and actions

NgZone is no longer functioning properly

execute the function once the filereader has completed reading the files

Generate visual at reduced quality (three.js)