Thực hiện gói trong systemjs có nghĩa là

Question

Tôi đã thiết lập dự án giống với Angular 2 (RC.1) và JS hệ thống. Tôi muốn tạo một gói duy nhất cho sản xuất và gói mọi thứ ngoại trừ mã của riêng tôi để phát triển. Đây là dòng chảy bình thường của tôi trong quá khứ, trước khi sử dụng systemjs. Sau bundling với ngụm-jspm/systemjs-builder file bó là lớn hơn 2 MB (nguồn) hoặc 1.2 MB (minified). Vì nó trông quá lớn nên tôi đã kiểm tra lại bằng cách sử dụng CLI đồng bằng jspm, nhưng kích thước tệp là như nhau.

lệnh được sử dụng là cho chế độ dev:

jspm bundle app/bootsrap - [path/to/app/**/*] mybundlename.js --inject 

Hoặc phục vụ sản xuất:

jspm bundle app/bootstrap mybundlename.js 

Có một tập tin 1.2 MB sản xuất dường như quá lớn nếu tôi muốn ví dụ để chạy ứng dụng web của tôi trên trình duyệt di động với băng thông giới hạn. Đặc biệt vì đây là một gói với hầu như không có mã nào của tôi (chỉ là tệp bootstrap và một thành phần ứng dụng chính). Gói ứng dụng Angular 1.5 của tôi thường khoảng 700kB cho các ứng dụng doanh nghiệp khá lớn.

Bằng cách xem chính gói, tôi nhận thấy có 540 tệp được nhóm. Tôi khá chắc chắn tôi không cần hầu hết trong số họ.

Toàn bộ config.js có thể tìm thấy tại đây: https://plnkr.co/edit/BhYy5Pu1QbmYJ7Ph5rBO.

Vì vậy, cuối cùng câu hỏi của tôi:

• file Nên kèm khi sử dụng systemJS trong một dự án hay nên tôi chỉ để lại cho họ unbundled và để systemJS chăm sóc bốc lười biếng?
• Nếu gói được đề xuất làm cách nào để tạo gói có kích thước hợp lý và chỉ bao gồm các tệp mà ứng dụng của tôi thực sự phụ thuộc?

Answer 1

Với bản trình diễn mới nhất và RC3 Tôi đã thay đổi hệ thống.JS luồng và bây giờ kích thước của gói nhỏ hơn đáng kể. Tuy nhiên RxJS mang lại quá nhiều vào câu chuyện và hy vọng nó sẽ được tối ưu hóa trong tương lai.

Đây là những gì tôi có bây giờ:

var map = { 
    'hub': 'src/app', 
    'rxjs': 'node_modules/rxjs', 
    '@angular': 'node_modules/@angular', 
    'ng2-translate': 'node_modules/ng2-translate' 
}; 

var packages = { 
    'hub': { main: 'main', defaultExtension: 'js' }, 
    'rxjs': { defaultExtension: 'js' }, 
    'ng2-translate': { 
     defaultExtension: 'js', main: 'ng2-translate.js' 
    } 
}; 

var packageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router' 
]; 

packageNames.forEach(function(pkgName) { 
    packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
}); 

System.config({ 
    defaultJSExtensions: true, 
    map: map, 
    packages: packages 
}); 

Và sau khi tạo một bó trên DEV tôi tải nó như thế này:

System.import('lib/bootstrap').then(function(){ 
    System.import('app/main'); 
}); 

Kích thước là 785kB + ~ 70KB cho polyfill góc (es6 -shim, phản ánh siêu dữ liệu và zone.js). Nó có thể nhỏ hơn, đặc biệt là polyfill nhưng bây giờ tôi sẽ gọi nó là phong nha.

• JSPM được khởi chạy rõ ràng từ thiết lập. Tôi nghĩ rằng góc không chơi quá tốt với JSPM khi nói đến kích thước vì nó bó rất nhiều tập tin không cần thiết.