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