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

Related