Ultimate Guide to Google Closure Compiler: Introduction, API Examples, and App Demonstration
The Google Closure Compiler is a powerful tool used to optimize JavaScript by removing dead code, minimizing its size, renaming variables, and performing advanced analyses. Here we will provide an introduction to this tool, explain dozens of its APIs, share code examples, and demonstrate their use in a sample application.
Getting Started
To use Google Closure Compiler, you need to install it via npm:
npm install google-closure-compiler
Basic Compilation
The simplest way to use the compiler is to run it from the command line to compile JavaScript files:
google-closure-compiler --js input.js --js_output_file output.min.js
Custom Compiler Flags
The compiler has many flags to customize its behavior. Here are some useful ones:
--compilation_level– Set the compilation level. Options includeSIMPLE,ADVANCED, andWHITESPACE_ONLY.--warning_level– Set the warning level. Options includeQUIET,DEFAULT, andVERBOSE.--externs– Specify external files to include in the compilation process.
Using the Compiler with Node.js
You can also use the compiler within a Node.js script to programmatically control the compilation process:
const closureCompiler = require('google-closure-compiler').compiler;
const compiler = new closureCompiler({
js: 'input.js',
compilation_level: 'ADVANCED'
});
compiler.run((exitCode, stdOut, stdErr) => {
if (exitCode === 0) {
console.log('Compilation succeeded:', stdOut);
} else {
console.error('Compilation failed:', stdErr);
}
});
Advanced Compilation with Exports
In advanced compilation mode, you often need to export functions or variables to ensure they’re accessible in the global scope:
// @export
const myExportedFunction = () => {
console.log('This is an exported function.');
};
// To ensure the compiler does not rename this function, add annotations:
/** @expose */
this.myExportedFunction = myExportedFunction;
Compilation with Externs
If you want to include external libraries without modifying them, use the externs feature:
google-closure-compiler --js input.js --js_output_file output.min.js --externs externs.js
Setting Up a Simple Web App with Google Closure Compiler
Below is an example of a simple app that uses Google Closure Compiler for optimization:
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple App</title>
<script src="output.min.js"></script>
</head>
<body>
<h1>Simple App Using Google Closure Compiler</h1>
<button onclick="myExportedFunction()">Click Me!</button>
</body>
</html>
// main.js
/** @param {string} name */
function greet(name) {
alert('Hello, ' + name);
}
// @export
function myExportedFunction() {
greet('World');
}
Compile the main.js file using the Compiler with the following command:
google-closure-compiler --js main.js --js_output_file output.min.js --compilation_level ADVANCED
Now, when you open the index.html file in a browser and click the button, the optimized and exported function will be called successfully.
Hash: 0433713c6ab110e9368283e61127e1a14d4d5e80c66576e4e5377abbfa356134
