SystemJS (angular2.0): Tải các tệp riêng biệt so với giảm thiểu một JS lớn?

Question

Tôi hơi bối rối về SystemJS, có vẻ như nó tự động tải các tệp một cách riêng biệt và không biên dịch và giảm thiểu những tệp này thành một tệp js lớn.

Tôi nghĩ ý tưởng ban đầu đã đưa ra yêu cầu cho các tệp khác nhau mặc dù nhỏ hơn là thực hành không tốt? Và một tệp js lớn được ưu tiên (được giảm thiểu) và được tạo ra thay thế.

Đây là cách tôi đã cài đặt SystemJS ngay bây giờ để tải các tệp riêng biệt (xem bên dưới), đây có phải là cách được khuyến nghị thực hiện việc này không?

System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('app/main') 
       .then(null, console.error.bind(console)); 

Answer 1

System.js (tức là các mô-đun chuẩn ES6) thay đổi công việc phát triển

Trong Phát triển

file riêng biệt + on-the-fly transpilation được sử dụng để thực hiện thử nghiệm, tải lại và/hoặc tải lại lại các tệp riêng lẻ hoạt động mà không phải chuyển đổi/xây dựng toàn bộ gói ứng dụng sau mỗi thay đổi.

Trong sản xuất

Các tập tin cá nhân được transpiled và kết hợp thành một hoặc nhiều-bó sử dụng sử dụng các công cụ như Webpack và JSPM.

Cả JSPM và Webpack (ví dụ như phiên bản 2) đều hỗ trợ các mô-đun ES6 theo mặc định và có thể tận dụng việc lắc cây (tức là qua rollup.js) để loại bỏ mã không sử dụng trong đầu ra của gói.

Ngoài ra: Cuối cùng, khi HTTP2 được hỗ trợ bởi hầu hết/tất cả máy chủ và tiêu chuẩn mô-đun ES6 được hỗ trợ nguyên bản bởi tất cả trình duyệt, gói sẽ trở thành mô hình chống. Lợi ích của việc đóng gói (tức là giảm yêu cầu HTTP) sẽ không còn phù hợp nữa, và những nhược điểm (ví dụ: đặc điểm bộ nhớ đệm kém, độ phức tạp phát triển tăng) sẽ đủ lý do để không sử dụng nó.

Tree Lắc

Thay vì tối ưu hóa bó bằng cách giảm nhập khẩu tập tin, cây lắc dấu vết tất cả các con đường nhập khẩu của ứng dụng để xác định mã sẽ được đưa vào sản xuất.

Ví dụ: nếu ứng dụng của bạn sử dụng các quan sát Rxj để tìm nạp dữ liệu không đồng bộ, bạn có thể nhập toàn bộ gói.

import 'rxjs'; 

Điều này hoạt động tốt để bắt đầu nhưng không hiệu quả. Bước lắc cây của quá trình đóng gói không có cách nào để xác định mã nào là | không được sử dụng để toàn bộ gói Rxjs sẽ được đưa vào đầu ra.

Để tối ưu hóa kích thước gói đầu ra, chỉ nên nhập các tính năng của Rxj được sử dụng trong mã ứng dụng của bạn.

import { Observable } from 'rxjs/Observable'; 
import { map } from 'rxjs/operators/map'; 
import { startWith } from 'rxjs/operators/startWith'; 

Khi lắc bước cây chạy, nó sẽ chỉ bao gồm mã từ gói Rxjs cần tạo ra một Observable và sử dụng các nhà khai thác map và startWith.

Transpilation

Ngoài cây lắc và bó, bạn cũng sẽ cần một chiến lược để transpile các ES6/nguồn typescript để ES5. Theo truyền thống, các công cụ tự động hóa như Grunt hoặc Gulp được sử dụng theo cách thủ công chỉ định các bước cần thiết để transpile, nối, giảm thiểu/làm xấu mã cho cả phát triển và sản xuất.

JSPM có thể xử lý tất cả điều này bằng cách tạo ra một gói tự thực hiện

jspm bundle-sfx app/main dist/main --uglify 

Webpack có thể thực hiện cùng

webpack -p app/main.js dist/main.js 

Ngoài ES6/nguyên cảo transpilation, cả hai công cụ này cũng có thể tận dụng bộ tải/plugins để hỗ trợ các loại tệp khác như css và scss.