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

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

---

에 의해 초기화 된 간단한 응용 프로그램이 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 (스크립트) 128kB {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에 대한 많은 토론을 검색했지만 일반적인 질문을 찾지 못했습니다.

---

2018 년 10 월 업데이트

이 답변은 많은 견인력을 얻었으므로 새로운 각도 최적화로 업데이트하는 것이 가장 좋을 것이라고 생각했습니다.

1. 다른 답변자가 말했듯 ng build --prod --build-optimizer이 Angular v5 미만을 사용하는 사람들에게 좋은 옵션입니다. 최신 버전의 경우 기본적으로이 작업이 수행됩니다.ng build --prod
2. 또 다른 옵션은 모듈 청킹 / 지연 로딩을 사용하여 애플리케이션을 더 작은 청크로 분할하는 것입니다.
3. Ivy rendering engine, while not in production yet, will soon offer better bundle sizes
4. Make sure your 3rd party deps are tree shakeable. If you're not using Rxjs v6 yet, you should be.
5. If all else fails, use a tool like webpack-bundle-analyzer to see what is causing bloat in your modules

---

Some claims that using AOT compilation can reduce the vendor bundle size to 250kb. However, in BlackHoleGalaxy's example, he uses AOT compilation and is still left with a vendor bundle size of 2.75MB with ng build --prod --aot, 10x larger than the supposed 250kb. This is not out of the norm for angular2 applications, even if you are using v4.0. 2.75MB is still too large for anyone who really cares about performance, especially on a mobile device.

There are a few things you can do to help the performance of your application:

1) AOT & Tree Shaking (angular-cli does this out of the box)

2) Using Angular Universal A.K.A. server-side rendering (not in cli)

3) Web Workers (again, not in cli, but a very requested feature)
see: https://github.com/angular/angular-cli/issues/2305

4) Service Workers
see: https://github.com/angular/angular-cli/issues/4006

You may not need all of these in a single application, but these are some of the options that are currently present for optimizing Angular performance. I believe/hope Google is aware of the out of the box shortcomings in terms of performance and plans to improve this in the future.

Here is a reference that talks more in depth about some of the concepts i mentioned above:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

---

Use latest angular cli version and use command ng build --prod --build-optimizer It will definitely reduce the build size for prod env.

This is what the build optimizer does under the hood:

The build optimizer has two main jobs. First, we are able to mark parts of your application as pure,this improves the tree shaking provided by the existing tools, removing additional parts of your application that aren’t needed.

The second thing the build optimizer does is to remove Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decrease the size of your JavaScript bundles, and increase the boot speed of your application for your users.

Note : One update for Angular 5, the ng build --prod automatically take care of above process :)

---

Lodash can contribute a bug chunk of code to your bundle depending on how you import from it. For example:

// 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'

Personally I still wanted smaller footprints from my utility functions. E.g. flatten can contribute up to 1.2K to your bundle, after minimization. So I've been building up a collection of simplified lodash functions. My implementation of flatten contributes around 50 bytes. You can check it out here to see if it works for you: https://github.com/simontonsoftware/micro-dash

---

Firstly, vendor bundles are huge simply because Angular 2 relies on a lot of libraries. Minimum size for Angular 2 app is around 500KB (250KB in some cases, see bottom post).
Tree shaking is properly used by angular-cli.
Do not include .map files, because used only for debugging. Moreover, if you use hot replacement module, remove it to lighten vendor.

To pack for production, I personnaly use Webpack (and angular-cli relies on it too), because you can really configure everything for optimization or debugging.
If you want to use Webpack, I agree it is a bit tricky a first view, but see tutorials on the net, you won't be disappointed.
Else, use angular-cli, which get the job done really well.

Using Ahead-of-time compilation is mandatory to optimize apps, and shrink Angular 2 app to 250KB.

Here is a repo I created (github.com/JCornat/min-angular) to test minimal Angular bundle size, and I obtain 384kB. I am sure there is easy way to optimize it.

Talking about big apps, using the AngularClass/angular-starter configuration, the same as in the repo above, my bundle size for big apps (150+ components) went from 8MB (4MB without map files) to 580kB.

---

The following solution assumes you are serving your dist/ folder using nodejs. Please use the following app.js in root level

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))

Make sure you install dependencies;

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

Now build the app

ng build --prod --build-optimizer

If you want to further compress the build say reduce 300kb(approx) from , then follow the below process;

Create a folder called vendor inside the src folder and inside vendor folder create a file rxjs.ts and paste the below code in it;

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

And then add the follwing in the tsconfig.json file in your angular-cli application. Then in the compilerOptions , add the following json;

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

This will make your build size way too smaller. In my project I reduced the size from 11mb to 1mb. Hope it helps

---

One thing I wish to share is how imported libraries increase the size of the dist. I had angular2-moment package imported, whereas I could do all the date time formatting I required using the standard DatePipe exported from @angular/common.

With Angular2-Moment "angular2-moment": "^1.6.0",

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191 kB {4} [initial] [rendered] chunk {1} main.e7496551a26816427b68.bundle.js (main) 2.2 MB {3} [initial] [rendered] chunk {2} styles.056656ed596d26ba0192.bundle.css (styles) 69 bytes {4} [initial] [rendered] chunk {3} vendor.62c2cfe0ca794a5006d1.bundle.js (vendor) 3.84 MB [initial] [rendered] chunk {4} inline.0b9c3de53405d705e757.bundle.js (inline) 0 bytes [entry] [rendered]

After removing Angular2-moment and using DatePipe instead

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191 kB {4} [initial] [rendered] chunk {1} main.f2b62721788695a4655c.bundle.js (main) 2.2 MB {3} [initial] [rendered] chunk {2} styles.056656ed596d26ba0192.bundle.css (styles) 69 bytes {4} [initial] [rendered] chunk {3} vendor.e1de06303258c58c9d01.bundle.js (vendor) 3.35 MB [initial] [rendered] chunk {4} inline.3ae24861b3637391ba70.bundle.js (inline) 0 bytes [entry] [rendered]

Note the vendor bundle has reduced half a Megabyte!

Point is it is worth checking what angular standard packages can do even if you are already familiar with an external lib.

---

Another way to reduce bundle, is to serve GZIP instead of JS. We went from 2.6mb to 543ko.

https://httpd.apache.org/docs/2.4/mod/mod_deflate.html

---

This did reduce the size in my case:

ng build --prod --build-optimizer --optimization

Size after running this command reduced from 1.7MB to 1.2MB, but not enough for my production purpose.

I work on facebook messenger platform and messenger apps need to be lesser than 1MB to run on messenger platform. Been trying to figure out a solution for effective tree shaking but still no luck.

---

I have a angular 5 + spring boot app(application.properties 1.3+) with help of compression(link attached below) was able to reduce the size of main.bundle.ts size from 2.7 MB to 530 KB.

Also by default --aot and --build-optimizer are enabled with --prod mode you need not specify those separately.

https://stackoverflow.com/a/28216983/9491345

---

Check you have configuration named "production" for ng build --prod, since it is shorthand for ng build --configuration=production No answer solved my problem, because the problem was sitting right in front of the screen. I think this might be quite common... I've internationalized the app with i18n renaming all configurations to e.g. production-en. Then I built with ng build --prod assuming, that the default optimization is used and should be close to optimal, but in fact just ng build has been executed resulting in 7mb bundle instead of 250kb.

---

If you are using Angular 8+ and you want to reduce the size of the bundle you can use Ivy. Just go to src/tsconfig.app.json and add the angularCompilerOptions parameter, for example:

{
  "extends": ...,
  "compilerOptions":...,
  "exclude": ...,

/* add this one */ 
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

참고URL : https://stackoverflow.com/questions/41432673/how-to-decrease-prod-bundle-size