제품 번들 크기를 줄이는 방법은 무엇입니까?
,▁by▁initial다▁simple▁app니▁i있습초▁a▁have로 초기화된 간단한 앱을 가지고 있습니다.angular-cli
.
3개의 경로와 관련된 일부 페이지를 표시합니다.저는 3개의 구성요소를 가지고 있습니다. 중 에서 나는 내가사용페중하나지이를 합니다.lodash
2 데이터를 "Angular 2 HTTP" 사용).Observable
s,map
그리고.subscribe
). 는 이 )을하여 표시합니다.*ngFor
.
하지만 제 앱이 정말 간단함에도 불구하고, 저는 큰 번들 패키지와 지도를 얻습니다.하지만 나는 gzip 버전에 대해 이야기하지 않고 gzip하기 전에 크기를 결정합니다.이 질문은 일반적인 추천 질문일 뿐입니다.
일부 테스트 결과:
ng 빌드
해시: 8efac7d6208adb8641c1 시간: 10129ms 청크 {0} main.번들.js, 메인.bundle.map (메인) 18.7kB {3} [initial] [rendered]
청크 {1} 스타일입니다.번들, 패턴, 스타일.번들.맵, 스타일.bundle.map (스타일) 155kB {4} [initial] [rendered]
{2}개의 스크립트를 청크합니다.bundle.js, 스크립트.bundle.map (스크립트) 128kB {4} [initial] [rendered]
청크 {3} 벤더입니다.bundle.js, 벤더.bundle.map (공급업체) 3.96MB [initial] [render]
{4} 인라인 청크입니다.bundle.js, 인라인.bundle.map (슬롯) 0바이트 [엔트리] [클릭]
잠깐만: 그렇게 간단한 앱을 위한 10Mb 벤더 번들 패키지?
ng build --message
해시: 09a5f095e33b2980e7cc 시간: 23455ms 청크 {0} main.6273b0f04a1c2ad6c.bundle.js, main.6273b0f04a1c2ad6c.bundle.map(메인) 18.3kB {3} [초기]
청크 {1} 스타일.bfda4d8a4eb2d0cb019입니다.bundle.bda, style.bfda4d8a4eb2d0cb019.bundle.map, styles.bfda4d8a4eb2d0cb019.bundle.map (스타일) 154KB {4} [initial] [rendered]
청크 {2}scripts.c5b720a05464ec211.bundle.js,scripts.c5b720a058e5464ec211.bundle.map(스크립트) 128KB {4} [초기] [반납됨]
청크 {3} vendor.07af2467307e17d85438.bundle.js, vendor.07af2467307e17d85438.bundle.map(벤더) 3.96MB [초기] [반납]
청크 {4} inline.a345391d4597f81820.js, inline.a345391d4597f81820.js.map(클라이언트) 0바이트 [entry]
다시 한 번 기다려 보십시오. prod와 비슷한 공급업체 번들 크기입니까?
ng build --prod --aot
해시: 517e4425ff872bbe3e5b 시간: 22856ms 청크 {0} main.95eadabase 554e3c2b43.165.js, 메인.95eadabace 554e3c2b43.bundle.map (주) 130kB {3} [초기] [렌더링]
청크 {1} 스타일.e53a388ae1ddd2b7f5434.bundle.css, 스타일.e53a388ae1dd2b7f5434.bundle.map, 스타일.e53a388ae1dd2b7f5434.bundle.map(스타일) 154kB {4} [초기]
청크 {2} 스크립트.e5c2c90547f3168a7564.bundle.js,script.e5c2c90547f3168a7564.map(스크립트) 128kB {4} [초기] [ 렌더링됨]
청크 {3} 벤더입니다.41a6c1f57136df286f14.165.js, 벤더.41a6c1f57136df286f14.bundle.map(공급업체) 2.75MB [초기] [제공업체]
{4} 인라인 청크입니다.97c0403c57a46c6a7920.165.js, 인라인.97c0403c57a46c6a7920.165.map (계속) 0바이트 [입력] [계속]
ng build --aot
해시: 040cc91df4df5ffc3c3f 시간: 11011ms 청크 {0} main.번들.js, 메인.bundle.map (메인) 130kB {3} [initial] [rendered]
청크 {1} 스타일입니다.번들, 패턴, 스타일.번들.맵, 스타일.bundle.map (스타일) 155kB {4} [initial] [rendered]
{2}개의 스크립트를 청크합니다.bundle.js, 스크립트.bundle.map (스크립트) 128kB {4} [initial] [rendered]
청크 {3} 벤더입니다.bundle.js, 벤더.bundle.map (공급업체) 2.75MB [initial] [render]
{4} 인라인 청크입니다.bundle.js, 인라인.bundle.map (슬롯) 0바이트 [엔트리] [클릭]
Prod에 앱을 배포하기 위한 몇 가지 질문이 있습니다.
- 벤더 번들이 왜 이렇게 큰가요?
- 나무 흔들기가 적절하게 사용되고 있습니까?
angular-cli
? - 이 번들 크기를 개선하는 방법은 무엇입니까?
- .map 파일이 필요합니까?
- 테스트 기능이 번들에 포함되어 있습니까?저는 그것들이 prod에 필요하지 않습니다.
- 일반적인 질문: prod용으로 포장할 권장 도구는 무엇입니까?아마도요.
angular-cli
(배경에서 웹 팩 사용)이 최선의 옵션이 아닙니까?더 잘할 수 있을까요?
스택 오버플로에 대한 많은 토론을 검색했지만 일반적인 질문을 찾지 못했습니다.
2020년 2월 업데이트
이 답변은 많은 관심을 끌었기 때문에 새로운 Angular 최적화로 업데이트하는 것이 가장 좋다고 생각했습니다.
- 다른답변말이했듯가자,,
ng build --prod --build-optimizer
Angular v5 미만을 사용하는 사용자에게 적합한 옵션입니다.최신 버전의 경우 이 작업은 기본적으로 다음을 사용하여 수행됩니다.ng build --prod
- 또 다른 옵션은 모듈 청킹/지연 로드를 사용하여 응용 프로그램을 더 작은 청크로 더 잘 분할하는 것입니다.
- 아이비 렌더링 엔진은 Angular 9에서 기본적으로 제공되며 더 나은 번들 크기를 제공합니다.
- 제3자 부서가 트리 쉐이킹 가능한지 확인합니다.아직 Rxjs v6를 사용하지 않으셨다면 사용하셔야 합니다.
- 그렇지 않으면 webpack-bundle-analyzer와 같은 도구를 사용하여 모듈에서 팽창을 일으키는 원인을 확인합니다.
- 파일이 압축되었는지 확인합니다.
일부에서는 AOT 컴파일을 사용하면 공급업체 번들 크기를 250kb로 줄일 수 있다고 주장합니다. Black지만서,블에랙HoleGalaxy의는 AOT 하고 HoleGalaxy, 는AOT, 어AOT와 함께 여전히 2 크기로 .ng build --prod --aot
예상되는 250kb보다 10배 더 큽니다..v4.0.2.75MB는 angular2 않습니다.
애플리케이션의 성능을 향상시키기 위해 다음과 같은 몇 가지 방법을 사용할 수 있습니다.
AOT & Tree Shaking (각형-cli는 이를 상자 밖에서 수행합니다.With Angular 9 AOT는 prod 및 dev 환경에서 기본적으로 사용됩니다.
Angular Universal A.K.A. 서버 측 렌더링 사용(cli가 아님)
Workers cli에는 된 기능 파일 (CLI에는 없음, cli에는 없음)
참조: https://github.com/angular/angular-cli/issues/2305근로자
참조: https://github.com/angular/angular-cli/issues/4006
이 모든 것이 단일 응용 프로그램에 필요하지 않을 수도 있지만, 현재 Angular 성능을 최적화하기 위해 제공되는 옵션 중 일부입니다.저는 구글이 성능 면에서 즉각적인 단점을 인식하고 있으며 앞으로 이를 개선할 계획이라고 믿습니다.
다음은 위에서 언급한 몇 가지 개념에 대해 자세히 설명하는 참조입니다.
https://medium.com/ @areai51/사용자에 맞게 조정할 수 있는 4차원 조정2-app-922ce5c1b294
최신 Angular cli 버전을 사용하고 command build --prod --build-optimizer를 사용하면 prodenv의 빌드 크기가 확실히 줄어들 것입니다.
후드 아래에서 빌드 최적화 도구가 수행하는 작업은 다음과 같습니다.
빌드 최적화 도구에는 두 가지 주요 작업이 있습니다.먼저, 응용프로그램의 일부를 순수한 것으로 표시할 수 있습니다. 이렇게 하면 기존 도구가 제공하는 트리 흔들림이 개선되어 필요 없는 응용프로그램의 추가 부분이 제거됩니다.
빌드 최적화 도구가 수행하는 두 번째 작업은 응용 프로그램의 런타임 코드에서 각도 장식자를 제거하는 것입니다.데코레이터는 컴파일러에서 사용되며 런타임에 필요하지 않으며 제거할 수 있습니다.이러한 각 작업은 JavaScript 번들의 크기를 줄이고 사용자에 대한 응용 프로그램의 부팅 속도를 높입니다.
참고: Angular 5 이상에 대한 한 번의 업데이트,ng build --prod
과정을 합니다 :) ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅠ
Lodash는 번들에서 가져오는 방법에 따라 번들에 버그 청크의 코드를 제공할 수 있습니다.예:
// 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'
개인적으로 저는 여전히 유틸리티 기능에서 더 작은 발자국을 원했습니다.예.flatten
는 에기할수여니까지 할 수 있습니다.1.2K
최소화 후에 당신의 번들로.그래서 저는 단순화된 lodash 기능들을 모아왔습니다.의 구현은 다음과 같은 이점을 제공합니다.50 bytes
https://github.com/simontonsoftware/micro-dash 에서 이 기능이 사용자에게 적합한지 확인할 수 있습니다.
첫째, Angular 2가 많은 라이브러리에 의존하기 때문에 벤더 번들이 매우 큽니다.Angular 2 앱의 최소 크기는 약 500KB(경우에 따라 250KB, 하단 게시물 참조)입니다.
나무 흔들기는 다음이 적절하게 사용합니다.angular-cli
.
포함 안 함.map
디버깅에만 사용되기 때문에 파일입니다.또한 핫 교체 모듈을 사용하는 경우 공급업체를 가볍게 하기 위해 모듈을 제거합니다.
생산을 위해 포장하기 위해, 저는 개인적으로 웹팩을 사용합니다. (그리고 angular-cli도 그것에 의존합니다.) 왜냐하면 당신은 정말 할 수 있기 때문입니다.configure everything
최적화 또는 디버깅을 위해.
당신이 경우용을 사용하고 .Webpack
첫 번째 보기가 조금 까다롭다는 것에 동의하지만, 인터넷에서 튜토리얼을 보면 실망하지 않을 것입니다.
아니면, 타기, 용사를 하세요.angular-cli
일을 아주 잘 해낼 수 있습니다.
앱을 최적화하고 Angular 2 앱을 250KB로 축소하려면 사전 컴파일을 사용해야 합니다.
여기 제가 작성한 보고서가 있습니다(github.com/JCornat/min-angular) 에서 최소 Angular 번들 크기를 테스트하고 384kB를 얻었습니다.나는 그것을 최적화하는 쉬운 방법이 있다고 확신합니다.
큰 앱에 대해 말하자면, 위의 보고서와 동일한 AngularClass/angular-starter 구성을 사용하여 큰 앱(150개 이상의 구성 요소)의 번들 크기가 8MB(지도 파일 없이 4MB)에서 580KB로 변경되었습니다.
다음 솔루션은 사용자가 nodejs를 사용하여 dist/폴더를 제공하고 있다고 가정합니다.루트 수준에서 다음 app.js를 사용하십시오.
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
빌드를 추가로 압축하려면 , 에서 300kb(약)를 줄인 다음 아래 프로세스를 수행합니다.
폴더 내부에 폴더를 만들고 내부 공급업체 폴더에 파일을 작성한 후 아래 코드를 붙여넣습니다.
export {Subject} from 'rxjs/Subject';
export {Observable} from 'rxjs/Observable';
export {Subscription} from 'rxjs/Subscription';
그런 다음 각진 cli 응용 프로그램의 파일에 다음을 추가합니다.그다음에.compilerOptions
json 파일을 합니다.
"paths": {
"rxjs": [
"./vendor/rxjs.ts"
]
}
이렇게 하면 빌드 크기가 너무 작아집니다.저는 프로젝트에서 11mb에서 1mb로 크기를 줄였습니다.도움이 되길 바랍니다.
여기 있는 모든 답은 구식입니다.저는 Angular 13 CLI를 사용하여 Angular의 표준 상용어플인 "Tour of Heroes"를 만들었습니다.초기 프로드 빌드에는 10초가 걸렸고, 이후 3초 만에 완료되었습니다.번들 크기는 Gzip 이전의 244kB입니다.제가 빌드할 때 사용한 명령은 "ng build"로, 보일러 플레이트 프로젝트에 변경 사항이 없습니다.
이 주제에 대한 잘못된 정보가 많습니다.사실을 널리 알리자.
빌드 폴더 크기(바이트), 프레임워크별, .map 파일 제거됨, nogzip.
- 2023/01/18 업데이트: Angular 15.1.0 - 153,803(라우터 없음), 46.05kBgzip 추정치.
- 2023/01/18 업데이트: 각도 15.1.0 - 236,373(라우터), 64.83kBgzip 추정치.
- upd 2022/03/02: Angular 13.2.5 - 171,580 (새로운 테스트 앱, scss, 라우터 없음).JS 크기 153.58kb, 46,90kb 압축 추정치(CLI 콘솔 출력에서 제공).
- upd 2022/03/02: Angular 13.2.5 - 249,449 (ng new Angular-tour-of-heroes, scss, 라우터).JS 크기 229.49kb, 64.91kb 압축 견적(CLI에서 제공).
- Angular 13.0.0 - 264,563 (ng new Angular-tour-of-heroes, scss, 라우터).
- 라우터 없이 17.0.2 대응 - 167,074 (npx create-react-app my-app)
- 라터 - 172,459 (npx create-message-app my-app, 패react에 " router추-dom" : "6.0.2" 로) 대 17.0.2 다. json, 랩
<App />
東京의<BrowserRouter>
여기에 설명된 바와 같이).
제가 공유하고 싶은 한 가지는 가져온 라이브러리가 디스트의 크기를 어떻게 증가시키는지입니다.@angular/common에서 내보낸 표준 DatePipe를 사용하여 필요한 날짜 시간 형식을 모두 수행할 수 있는 반면, 저는 Angular2-moment 패키지를 가져왔습니다.
각도 2-모멘트 포함"angular2-moment": "^1.6.0",
청크 {0} polyfills.036982dc15bb5fc67cb8.bundle.js(polyfills) 191kB {4} [initial] 청크 {1} main.e7496551a2616427b68.bundle.js(메인) 2.2MB {3} [initial] 청크 스타일 {2}.056656d626b0192192192192.bundle.bundle(style) 69바이트 {4} [initial] [initial] [interial] 청크 {3} 벤더입니다.62c2cfe0ca794a5006d1.bundle.js (공급업체) 3.84MB [initial] [rendered] 청크 {4} 인라인.0b9c3de53405d705e757.bundle.js (인라인) 0바이트 [entry] [rendered]
Angular2-moment를 제거하고 대신 DatePipe를 사용한 후
청크 {0} polyfills.036982dc15bb5fc67cb8.bundle.js(polyfills) 191kB {4} [초기] 청크 {1} main.f2b62721788695a4655c.bundle.js(주) 2.2MB {3} [초기] 청크 스타일 {2566566559d626b0192192192192ba0192bdbdb0192192b0192192b0192192192192bundle.css(styles) 69바이트 {4} [initial] [rendered] 청크 {3} vendor.e1de06303258c58c9d01.bundle.js(벤더) 3.35MB [initial] [rendered] 청크 {4} 인라인.3ae24861b3637391ba70.165.js (계속) 0바이트 [엔트리] [계속]
공급업체 번들이 0.5메가바이트를 줄였습니다!
요점은 당신이 이미 외부 lib에 익숙하더라도 각도 표준 패키지가 무엇을 할 수 있는지 확인할 가치가 있다는 것입니다.
번들을 줄이는 또 다른 방법은 JS 대신 GZIP을 제공하는 것입니다.우리는 2.6mb에서 543ko로 갔습니다.
https://httpd.apache.org/docs/2.4/mod/mod_deflate.html
100% 작동합니다.
ng build --prod --aot --build-optimizer --vendor-chunk=true
업데이트: 2022/05/23 (앵글 14 포함)
g-zip
그리고.ng build --prod
매우 유용한 두 가지 해결책입니다.그것은 당신에게 많은 도움이 될 것입니다.하지만 만약 당신이 최선을 다했다면요.module을 사용하는 아직도지 ?. 하지 않나요?게으른 부하 모듈을 사용하고 있습니다. 여전히 작동하지 않습니까?
여기 당신을 위한 답이 있습니다. 귀사의 "Angular 13"에 대한 "배럴 .main.js
해결책은 간단합니다.
- ▁your▁change기를
tsconfig.json
빌드"module": "commonjs"
"module": "es2020"
또는 esnext (여기서 es2020 설명을 사용해야 합니다. https://web.archive.org/web/20220605011837/https ://angular.io/guide/migration-update-module-and-target-compiler-options)
- 더하다
sideEffects: false
package.json
결과를 확인합니다.
왜요?
완전한 설명은 여기 https://webpack.js.org/guides/tree-shaking/ #uspusion이고 여기 https://github.com/angular/angular-cli/issues/16799 과 여기 https://stackoverflow.com/a/59353152/5748537 입니다.짧게 말씀드리죠.
는작 "A다 와가"는 "B크 다있" 습다니다니둘기냅라이. 하여 둘 다 로 내보냅니다.index.ts
당은당신를프에 A져가니다옵. 당신이 가 포함되어 .최종 번들에는 여전히 당신이 원하지 않는 B가 포함되어 있습니다.
왜요?
commonjs
똑똑하지 않습니다.사용.es2020
어떤 것이 사용되고 어떤 것이 사용되지 않는지 이해하는 것이 더 낫습니다.하지만 그들은 그것이 제거되어야 할지 말아야 할지 확신하지 못합니다.당신이 추가합니다.sideEffects: false
"안전하다"고그것을 .클리어 데드 코드는 안전하다"고 그들에게 말하고 그들은 그것을 했습니다.그렇다면 당신의 보따리는 작습니다.이것은 리액트, VueJS를 포함한 모든 현대 JS 프레임워크에서 사용할 수 있습니다.
배럴 부작용에 대한 각도 프로젝트의 문제를 여기에서 읽으십시오. https://github.com/angular/angular-cli/issues/16799
p/s: 제 프로덕션 각도 웹사이트는 https://awread.vn 입니다. 매일 100명의 사용자가 있습니다.
를 한 적이 있는 ng build --prod
당신은 하지 말았어야 했습니다.vendor
파일이 전혀 없습니다.
내가 그냥 뛰면,ng build
다음 파일을 가져옵니다.
폴더의 전체 크기는 ~14MB입니다. Waat! :d
하지만 내가 뛰면,ng build --prod
다음 파일을 가져옵니다.
폴더의 전체 크기는 584K입니다.
하나의 코드와 같은 코드.두 경우 모두 아이비를 활성화했습니다.각도는 8.2.13입니다.
그래서 - 당신이 추가하지 않은 것 같습니다.--prod
당신의 빌드 명령에?
Angular 8+를 사용하는 경우 번들의 크기를 줄이려면 Ivy를 사용할 수 있습니다.Ivy는 Angular 9에서 기본 뷰 엔진으로 제공됩니다. 그냥 src/tsconfig.app.json으로 이동하고 AngularCompilerOptions 매개 변수를 추가합니다. 예:
{
"extends": ...,
"compilerOptions":...,
"exclude": ...,
/* add this one */
"angularCompilerOptions": {
"enableIvy": true
}
}
이것은 제 경우의 크기를 줄였습니다.
ng build --prod --build-optimizer --optimization.
Angular 5+ ng-build의 경우 --prod는 기본적으로 이 작업을 수행합니다.이 명령을 실행한 후의 크기는 1.7에서 감소했습니다.MB - 1.2MB, 하지만 제 제작 목적에는 충분하지 않습니다.
저는 페이스북 메신저 플랫폼에서 일하는데 메신저 앱이 메신저 플랫폼에서 실행되려면 1MB 미만이어야 합니다.효과적인 나무 흔들기에 대한 해결책을 찾고 있었지만 여전히 운이 없습니다.
각 문서 v9(https://angular.io/guide/workspace-config#alternate-build-configurations) 에서 가져온 것입니다.
기본적으로 프로덕션 구성이 정의되며 ng build 명령에는 이 구성을 사용하여 빌드하는 --prod 옵션이 있습니다.프로덕션 구성은 파일 번들, 과도한 공백 최소화, 주석 및 비활성 코드 제거, 짧고 암호화된 이름("최소화")을 사용하도록 코드 다시 쓰기 등 다양한 방법으로 앱을 최적화하는 기본값을 설정합니다.
또한 @angular-builder/custom-webpack:browser builder를 사용하여 배포 가능한 모든 파일을 압축할 수 있습니다. 여기서 사용자 지정 webpack.config.js는 다음과 같습니다.
module.exports = {
entry: {
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js'
},
plugins: [
new CompressionPlugin({
deleteOriginalAssets: true,
})
]
};
나중에 압축 콘텐츠를 제공하도록 웹 서버를 구성해야 합니다. 예를 들어 nginx를 사용하여 nginx.conf에 추가해야 합니다.
server {
gzip on;
gzip_types text/plain application/xml;
gzip_proxied no-cache no-store private expired auth;
gzip_min_length 1000;
...
}
제 경우 --proding 빌드를 사용한 후 dist 폴더가 25에서 5mb로 줄어들었고 압축 후에는 1.5mb로 더 줄어들었습니다.
각진 5+스프링 부트 앱(application.properties 1.3+)을 가지고 있으며 압축의 도움을 받아 메인의 크기를 줄일 수 있었습니다.bundle.ts 크기는 2.7MB ~ 530KB입니다.
또한 기본적으로 --auto 및 --build-optimizer는 --prod 모드에서 사용할 수 있습니다.
https://stackoverflow.com/a/28216983/9491345
"production" for build라는 이름의 구성이 있는지 확인합니다. --forwarding은 build라는 약어이기 때문에 --configuration=production 문제를 해결할 수 없습니다. 문제가 화면 바로 앞에 있었기 때문입니다.제 생각에 이건 꽤 흔한 일인 것 같아요저는 i18n으로 앱을 국제화하여 모든 구성의 이름을 production-en으로 변경했습니다.그런 다음 기본 최적화가 사용되고 최적화에 가까워야 한다고 가정하고 ng build --prod로 빌드했지만 실제로 just build가 실행되어 250kb가 아닌 7mb 번들이 생성되었습니다.
언급URL : https://stackoverflow.com/questions/41432673/how-to-decrease-prod-bundle-size
'programing' 카테고리의 다른 글
왼쪽에 소스 코드를 들여쓰기 위한 이클립스 키보드 단축키? (0) | 2023.04.26 |
---|---|
Windows 7(윈도우 7) 작업 표시줄에서 Eclipse를 올바르게 작동시키는 방법 (0) | 2023.04.26 |
Swift에서 기본 탐색 모음 공간을 제거하는 방법UI 탐색 보기 (0) | 2023.04.26 |
시트를 복사하고 결과 시트 개체를 가져오시겠습니까? (0) | 2023.04.26 |
ModelState인 경우 오류 메시지가 표시됩니다.유효성이 실패합니까? (0) | 2023.04.26 |