[angular] 제품 번들 크기를 줄이는 방법은 무엇입니까?

에 의해 초기화 된 간단한 응용 프로그램이 angular-cli있습니다.

3 개의 경로와 관련된 일부 페이지를 표시합니다. 세 가지 구성 요소가 있습니다. 이 페이지 I 사용 중 하나에 lodash일부 데이터를 얻을 수 및 각도 2 HTTP 모듈 (RxJS 사용 Observable들, map그리고 subscribe). 간단한 요소를 사용하여 이러한 요소를 표시합니다 *ngFor.

그러나 내 앱이 정말 간단하다는 사실에도 불구하고 거대한 (내 의견으로는) 번들 패키지 및 맵을 얻습니다. gzip 버전에 대해서는 이야기하지 않지만 gzipping 전 크기입니다. 이 질문은 일반적인 권장 사항 문의입니다.

일부 테스트 결과 :

ng 빌드

해시 : 8efac7d6208adb8641c1 시간 : 10129ms 청크 {0} main.bundle.js, main.bundle.map (메인) 18.7 kB {3} [초기] [렌더링]

청크 {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (스타일) 155 kB {4} [초기] [렌더링]

청크 {2} scripts.bundle.js, scripts.bundle.map (스크립트) 128 kB {4} [초기] [렌더링]

청크 {3} vendor.bundle.js, vendor.bundle.map (공급 업체) 3.96MB [초기] [렌더링]

청크 {4} inline.bundle.js, inline.bundle.map (인라인) 0 바이트 [entry] [렌더링]

대기 : 간단한 앱을위한 10Mb 공급 업체 번들 패키지?

ng 빌드 –prod

해시 : 09a5f095e33b2980e7cc 시간 : 23455ms 청크 {0} main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map (메인) 18.3 kB {3} [초기] [렌더링]

청크 {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.map, styles.bfdaa4d8a4eb2d0cb019.bundle.map (스타일) 154 kB {4} [초기] [렌더링]

청크 {2} scripts.c5b720a078e5464ec211.bundle.js, scripts.c5b720a078e5464ec211.bundle.map (스크립트) 128 kB {4} [초기] [렌더링]

청크 {3} vendor.07af2467307e17d85438.bundle.js, vendor.07af2467307e17d85438.bundle.map (공급 업체) 3.96MB [초기] [렌더링]

청크 {4} inline.a345391d459797f81820.bundle.js, inline.a345391d459797f81820.bundle.map (인라인) 0 바이트 [entry] [렌더링]

다시 기다립니다 : prod와 비슷한 공급 업체 번들 크기?

ng build --prod --aot

해시 : 517e4425ff872bbe3e5b 시간 : 22856ms 청크 {0} main.95eadabace554e3c2b43.bundle.js, main.95eadabace554e3c2b43.bundle.map (main) 130 kB {3} [초기] [렌더링]

청크 {1} 스타일 .e53a388ae1dd2b7f5434.bundle.css, 스타일 .e53a388ae1dd2b7f5434.bundle.map, styles.e53a388ae1dd2b7f5434.bundle.map (스타일) 154 kB {4} [초기] [렌더링]

청크 {2} 스크립트 .e5c2c90547f3168a7564.bundle.js, scripts.e5c2c90547f3168a7564.bundle.map (스크립트) 128 kB {4} [초기] [렌더링]

청크 {3} vendor.41a6c1f57136df286f14.bundle.js, vendor.41a6c1f57136df286f14.bundle.map (공급 업체) 2.75MB [초기] [렌더링]

청크 {4} 인라인 .97c0403c57a46c6a7920.bundle.js, 인라인 .97c0403c57a46c6a7920.bundle.map (인라인) 0 바이트 [항목] [렌더링]

ng build --aot

해시 : 040cc91df4df5ffc3c3f 시간 : 11011ms 청크 {0} main.bundle.js, main.bundle.map (메인) 130kB {3} [초기] [렌더링]

청크 {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (스타일) 155 kB {4} [초기] [렌더링]

청크 {2} scripts.bundle.js, scripts.bundle.map (스크립트) 128 kB {4} [초기] [렌더링]

청크 {3} vendor.bundle.js, vendor.bundle.map (공급 업체) 2.75MB [초기] [렌더링]

청크 {4} inline.bundle.js, inline.bundle.map (인라인) 0 바이트 [entry] [렌더링]

prod에 내 앱을 배포하기위한 몇 가지 질문이 있습니다.

• 공급 업체 번들이 왜 그렇게 큰가요?
• 나무 흔들림이 올바르게 사용 angular-cli됩니까?
• 이 번들 크기를 개선하는 방법은 무엇입니까?
• .map 파일이 필요합니까?
• 테스트 기능이 번들에 포함되어 있습니까? 나는 그것들을 자극 할 필요가 없다.
• 일반적인 질문 : 제품을 포장하기 위해 권장되는 도구는 무엇입니까? 어쩌면 angular-cli(백그라운드에서 Webpack을 사용하는) 최선의 선택이 아닐까요? 더 잘할 수 있을까요?

Stack Overflow에 대한 많은 토론을 검색했지만 일반적인 질문을 찾지 못했습니다.

답변

// includes the entire package (very large)
import * as _ from 'lodash';

// depending on your buildchain, may still include the entire package
import { flatten } from 'lodash';

// imports only the code needed for `flatten`
import flatten from 'lodash-es/flatten'

const express = require('express'),http = require('http'),path = require('path'),compression = require('compression');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.use(compression()) //compressing dist folder
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
})

const port = process.env.PORT || '4201';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log('Running at port ' + port))

npm install compression --save
npm install express --save;

ng build --prod --build-optimizer

export {Subject} from 'rxjs/Subject';
export {Observable} from 'rxjs/Observable';
export {Subscription} from 'rxjs/Subscription';

"paths": {
      "rxjs": [
        "./vendor/rxjs.ts"
      ]
    }