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

: Blogs; Blogs công nghệ

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

# 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

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'

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',
      },
    })
  ]
};

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

Duyet

Có thể bạn chưa biết:

DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...

Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>