RequestJS - Trình tối ưu hóa

Trong chương này, chúng ta sẽ thảo luận về tối ưu hóa trong RequestJS. Trình tối ưu hóa trong RequestJS có các đặc điểm sau:

Kết hợp các tệp kịch bản với sự trợ giúp của UglifyJS để sử dụng mặc định hoặc Trình biên dịch đóng cửa để sử dụng Java
Kết hợp các tệp CSS với nhau.

Trình tối ưu hóa là một thành phần của r.jsbộ chuyển đổi cho Node và Nashorn . Nó được phát triển để trở thành một phần của quá trình xây dựng chứ không phải cho quá trình phát triển.

Thí dụ

Sau khi tải xuống r.js trong thư mục dự án của bạn, cấu trúc của thư mục sẽ giống như bên dưới:

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

Tệp HTML của bạn sẽ trông như hình dưới đây -

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Tệp main.js của bạn sẽ trông như hình dưới đây:

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

Tệp main.css của bạn sẽ trông như hình dưới đây -

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

Thiết lập cơ bản của Trình tối ưu hóa

Bạn có thể sử dụng đối số dòng lệnh hoặc thuộc tính xây dựng hồ sơ để thiết lập dự án, cả hai đều có thể trao đổi với nhau.

Sau đây là cú pháp cho dòng lệnh:

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

Sau đây là cú pháp để xây dựng hồ sơ:

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

Sau đó, bạn có thể chuyển tên hồ sơ bản dựng cho trình tối ưu hóa trong dòng lệnh, như được hiển thị bên dưới:

node r.js -o build.js

Có một số thiếu sót về cú pháp đối số dòng lệnh. Việc sử dụng kết hợp cả đối số dòng lệnh hoặc thuộc tính xây dựng hồ sơ có thể khắc phục những thiếu sót này.

Tối ưu hóa một tệp JS duy nhất

Để tối ưu hóa một tệp JS duy nhất, bạn cần tạo một tệp JS có chứa nội dung của tất cả các phần phụ thuộc của nó. Tệp của bạn sẽ trông như dưới đây -

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

Bây giờ, bạn có thể tạo tệp main.js có tất cả các phụ thuộc cho ứng dụng. Tệp này được sử dụng trong tệp HTML để tải tất cả các tệp JS với một yêu cầu. Lưu ý rằng các tệp được tạo không nên có trong thư mục mã nguồn; các tệp phải ở trong bản sao của dự án.

Sử dụng tài nguyên CDN

Trình tối ưu hóa không tải tập lệnh bằng tài nguyên mạng / CDN (Mạng phân phối nội dung). Trong trường hợp, các tập lệnh cần được tải bằng CDN thì bạn cần ánh xạ các tệp này thành tên mô-đun và tải tệp xuống đường dẫn tệp cục bộ của bạn. Bạn có thể sử dụng từ đặc biệt "trống" trong cấu hình đường dẫn của hồ sơ xây dựng như được hiển thị trong cú pháp sau:

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

Tệp chính sẽ trông như hình dưới đây -

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

Tối ưu hóa tệp CSS đơn

Tệp CSS được tối ưu hóa bằng cách sử dụng các tham số sau trực tiếp trong dòng lệnh như hình dưới đây:

node ../../r.js -o cssIn = main.css out = main-built.css

Tệp CSS cũng có thể được tối ưu hóa trong tệp xây dựng bằng cách sử dụng các thuộc tính tương tự như hình dưới đây:

...
cssIn:"main.css",
out:"main-built.css"
...

Cả hai phương pháp trên đều được phép và sẽ tạo một tệp có tên là projectfolder / css / mainbuild.css . Tệp này sẽ có nội dung của main.css, các đường dẫn url () được điều chỉnh thích hợp và các nhận xét bị xóa.

Tối ưu hóa toàn bộ dự án

Trình tối ưu hóa sử dụng hồ sơ bản dựng để tối ưu hóa tất cả css và jscác tập tin. Trong ví dụ sau, tệp build.js được tạo.

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

Tệp build.js hướng dẫn RequestJS sao chép tất cả các thư mục ứng dụng (tham số appDir) vào thư mục đầu ra được xây dựng (tham số dir) và áp dụng tất cả các tối ưu hóa cho các tệp nằm trong thư mục đầu ra. Chạy lệnh sau để tạo hồ sơ trong thư mục ứng dụng -

node r.js -o build.js