Tối ưu hóa Javascript với Google Closure Compiler

Closure Compiler là 1 dự án của Google giúp Javascript tải và chạy nhanh hơn. Không phải là biên dịch từ Javascript sang mã máy, mà Closure biên dịch từ Javascript sang better-Javascript. Tức là tự động viết lại Javascript sao cho tối ưu hóa nhất mà kết quả không thay đổi.

Closure sẽ đọc Javascript, thống kê, loại bỏ dead code, kiểm tra các biến và mối quan hệ giữa chúng, kiểu dữ liệu có hợp lý hay không, viết lại (rewrite) và nén sao cho tối ưu nhất có thể.

Closure được triển khai sử dụng ở các dạng:

• Công cụ dòng lệnh command line (Java)
• Tools online, paste code vào và xuất ngay kết quả: https://closure-compiler.appspot.com/home
• A RESTful API.
• Build Systems: Plugin cho Webpack hoặc Gulp

Giao diện Web service

closure-compiler-js

closure-compiler-js là project sử dụng được closure-compiler (Java) trên Javascript. Cài đặt closure-compiler-js qua npm

npm install --save google-closure-compiler-js

Mặc định Closure hỗ trợ chuyển ES6 sang ES5 và tối ưu hóa code

const compile = require('google-closure-compiler-js').compile;

const flags = {
  jsCode: [{src: 'const x = 1 + 2;'}],
};
const out = compile(flags);
console.info(out.compiledCode);  // will print 'var x = 3;\n'

Webpack

Cấu hình webpack như bên dưới:

const ClosureCompiler = require('google-closure-compiler-js').webpack;
const path = require('path');

module.exports = {
  entry: [
    path.join(__dirname, 'app.js')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.min.js'
  },
  plugins: [
    new ClosureCompiler({
      options: {
        languageIn: 'ECMASCRIPT6',
        languageOut: 'ECMASCRIPT5',
        compilationLevel: 'ADVANCED',
        warningLevel: 'VERBOSE',
      },
    })
  ]
};

Tham khảo

Còn khá nhiều chức năng và tham số như angularPass, polymerPass, rewritePolyfills, …

• Closure Compiler - https://developers.google.com/closure/compiler/
• Work through the Application Hello World.
• Closure Source Code - https://github.com/google/closure-compiler
• Closure Compiler JS - https://github.com/google/closure-compiler-js