각 Angular 프로젝트에서 생성되는 파일 수가 엄청납니다.
Angular를 위한 간단한 hello world 앱을 시작하고 싶었어요.
공식 퀵스타트의 지시에 따라 설치했을 때 프로젝트에 32,000개의 파일이 생성되었습니다.
뭔가 잘못됐거나 뭔가 놓친 것 같아서 angular-cli를 사용하기로 했는데 프로젝트 셋업 후 41,000개의 파일을 세어 보았습니다.
어디서부터 제가 잘못했을까요?내가 정말 확실한 걸 놓치고 있는 걸까?
설정에는 문제가 없습니다.
Angular (버전 2.0 이후)는 개발에 npm 모듈과 의존관계를 사용합니다.그것이 당신이 그렇게 많은 파일을 보는 유일한 이유입니다.
Angular의 기본 설정에는 개발 목적으로만 필수적인 트랜스필러, 타이핑 종속성이 포함되어 있습니다.
개발이 완료되면 이 애플리케이션을 번들하기만 하면 됩니다.
, 「1」은 .bundle.js이 파일을 서버에 전개할 수 있습니다.
'트랜스필러'컴파일러일 뿐입니다.추가해 주셔서 감사합니다.
Typical Angular2 Project
NPM 패키지 파일(개발) 실제 파일(전개)
@angular 3,236 1
rxJS 1,349 1*
core-js 1,341 2
typings 1,488 0
gulp 1,218 0
gulp-typescript 1,243 0
lite-server 5,654 0
systemjs-builder 6,470 0
__________________________________________________________________
Total 21,999 3
*다음과 같습니다.
[번들 프로세스에 대해서는, 여기를 참조해 주세요 » ]
개발 설정에는 문제가 없습니다.
운영 구성에 문제가 있습니다.
"Angular 2 Project" 또는 "Angular 2 Project What based JS"를 개발할 때 모든 파일을 사용할 수 있으며 모든 파일을 가져올 수 있습니다.그러나 이 프로젝트를 수행하려면 구조화된 모든 파일을 조합하여 불필요한 파일을 제거해야 합니다.
이러한 파일을 조합하는 방법에는, 여러가지 옵션이 있습니다.
- YUI 컴프레서
- Google 클로저 컴파일러
- 서버측(최선이라고 생각합니다) GUP
여러 사람이 이미 언급했듯이:node_modules 디렉토리(패키지의 NPM 위치)의 모든 파일은 프로젝트 의존관계(이른바 직접 의존관계)의 일부입니다.또, 의존관계는 독자적인 의존관계등을 가질 수도 있습니다(이른바 전이 의존관계라고 불립니다).수만 개의 파일은 특별한 것이 아닙니다.
업로드 할 수 있는 파일이 10,000개(댓글 참조)밖에 없기 때문에 번들러 엔진으로 하겠습니다.이 엔진은 모든 JavaScript, CSS, HTML 등을 번들하고 단일 번들을 만듭니다(지정할 경우 그 이상).index.html이 이 번들을 로드하면 끝입니다.
저는 웹 팩의 팬이기 때문에 웹 팩 솔루션에서는 애플리케이션 번들과 벤더 번들을 만듭니다(애플리케이션의 완전한 동작에 대해서는, 여기를 참조해 주세요.https://github.com/swaechter/project-collection/tree/master/web-angular2-example)
index.displaces를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Webcms</title>
</head>
<body>
<webcms-application>Applikation wird geladen, bitte warten...</webcms-application>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
webpack.config.syslog
var webpack = require("webpack");
var path = require('path');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
/*
* Configuration
*/
module.exports = {
devtool: 'source-map',
debug: true,
entry: {
'main': './app/main.ts'
},
// Bundle configuration
output: {
path: root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
// Include configuration
resolve: {
extensions: ['', '.ts', '.js', '.css', '.html']
},
// Module configuration
module: {
preLoaders: [
// Lint all TypeScript files
{test: /\.ts$/, loader: 'tslint-loader'}
],
loaders: [
// Include all TypeScript files
{test: /\.ts$/, loader: 'ts-loader'},
// Include all HTML files
{test: /\.html$/, loader: 'raw-loader'},
// Include all CSS files
{test: /\.css$/, loader: 'raw-loader'},
]
},
// Plugin configuration
plugins: [
// Bundle all third party libraries
new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),
// Uglify all bundles
new UglifyJsPlugin({compress: {warnings: false}}),
],
// Linter configuration
tslint: {
emitErrors: false,
failOnHint: false
}
};
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
장점:
- 풀 빌드 라인(TS 보풀, 컴파일, 최소화 등)
- 전개용 3개의 파일 --> 소수의 HTTP 요구만
단점:
- 빌드 시간 단축
- Http 2 프로젝트에는 최적인 솔루션이 아닙니다(면책사항 참조).
면책사항:이는 각 Http 요청의 오버헤드를 최소화하므로 Http 1.*에 적합한 솔루션입니다.index.html과 각 번들에 대한 요청만 있을 뿐 100~200개의 파일에 대한 요청은 없습니다.지금으로선 이게 최선이에요.
반면 Http 2는 Http 오버헤드를 최소화하려고 하므로 스트림 프로토콜을 기반으로 합니다.이 스트림은 쌍방향(클라이언트<-->서버)으로 통신할 수 있기 때문에 보다 인텔리전트한 자원 로딩이 가능합니다(필요한 파일만 로드합니다).이 스트림에 의해 HTTP 오버헤드가 대부분 해소됩니다(Http 라운드 트립 감소).
다만, IPv6 와 같게 됩니다.Http 2 를 실제로 사용하기까지는 몇 년이 걸립니다.
Angular CLI에서 생성된 프로젝트에서 dist(분산 가능의 줄임말) 폴더만 배포해야 합니다.이것에 의해, 툴은 소스코드와 의존 관계를 취득해, 애플리케이션의 실행에 필요한 정보만을 얻을 수 있습니다.
ng build --prod를 통한 실가동 빌드에 관해 Angular CLI에 문제가 있다고 말한 것.
어제(2016년 8월 2일) 빌드 메커니즘을 Brocoli + systemjs에서 생산 빌드를 성공적으로 처리하는 webpack으로 바꾼 릴리스가 이루어졌습니다.
다음의 순서에 근거합니다.
ng new test-project
ng build --prod
a a a a a a a a a 가 보인다dist폴더 크기는 1.1MB이며, 14개의 파일 중 다음과 같습니다.
./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js
주의: 현재 angular cli의 웹 팩 버전을 설치하려면 다음을 실행해야 합니다. npm install angular-cli@webpack -g
최근 angular cli를 사용하여 새 프로젝트를 만들고 node_modules 폴더가 270 mb였으므로 이것은 정상이지만 angular world에 대한 대부분의 새로운 개발은 이에 의문을 제기하고 유효하다고 확신합니다.단순한 신규 프로젝트에서는 의존관계를 조금 줄이는 것이 좋습니다.모든 패키지가 무엇에 의존하고 있는지 모르는 것은 특히 CLI를 처음 시도하는 신규 개발자에게는 다소 불안할 수 있습니다.또한 대부분의 기본 튜토리얼에서는 내보내기된 파일만 가져오기 위한 배포 설정에 대해 설명하지 않습니다.각진 공식 웹사이트에서 제공되는 튜토리얼에서도 이 간단한 프로젝트를 어떻게 전개해야 하는지에 대해 언급하고 있다고 생각하지 않습니다.
Angular 자체는 의존관계가 많고 CLI 베타 버전은 4배 더 많은 파일을 다운로드합니다.
이렇게 하면 파일('10,000 파일만')을 줄일 수 있는 심플한 프로젝트를 만들 수 있습니다.https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html에서 설명하는 사전 컴파일에 대해서는 아무도 언급하지 않은 것 같습니다.
지금까지의 Angular에 대한 제 경험은 AoT가 로딩 시간이 거의 없이 가장 작은 빌드를 만든다는 것입니다.여기서 가장 중요한 것은 몇 가지 파일만 실전 가동에 출하하면 된다는 것입니다.
이는 템플릿이 "Ahead of Time"으로 컴파일되기 때문에 Angular 컴파일러가 프로덕션 빌드와 함께 출하되지 않기 때문으로 보입니다.HTML 템플릿 마크업이 javascript 명령으로 변환되어 원래 HTML로 되돌리기가 매우 어려운 것을 보는 것도 매우 멋집니다.
개발 및 AoT 빌드에서 Angular 앱의 다운로드 크기, 파일 수 등을 보여 주는 간단한 비디오를 만들었습니다.여기서 보실 수 있습니다.
데모의 소스코드는 다음과 같습니다.
https://github.com/fintechneo/angular2-templates
그리고, 다른 모든 사람들이 여기에 언급했듯이, 개발 환경에 많은 파일이 있어도 아무런 문제가 없습니다.Angular와 다른 많은 현대적 프레임워크에 따라 발생하는 모든 의존관계는 이와 같습니다.다만, 실제 가동 환경에 출하할 때는, 몇개의 파일로 포장할 수 있는 것이 차이점이 있습니다.또한 이러한 의존관계 파일을 모두 git 저장소에 저장하는 것도 원하지 않습니다.
이것은 실제로는 Angular에 특정되지 않습니다. 툴링에 NodeJs/npm 생태계를 사용하는 거의 모든 프로젝트에서 발생합니다.
이러한 프로젝트는 node_modules 폴더 내에 있으며 직접 종속성을 실행해야 하는 중계 종속성입니다.
노드 에코시스템 모듈은 보통 크기가 작습니다.즉, 스스로 개발하는 것이 아니라 모듈 형태로 필요한 대부분을 Import하는 경향이 있습니다.이것은 유명한 왼쪽 패드 기능과 같은 작은 것들을 포함할 수 있는데, 왜 연습이 아니라면 우리가 직접 쓸까요?
즉, 파일이 많다는 것은 모든 것이 모듈화되어 모듈 작성자가 다른 모듈을 자주 재사용한다는 것을 의미합니다.이러한 모듈화의 용이성은 노드 생태계가 빠르게 성장한 주요 이유 중 하나일 것입니다.
원칙적으로는 문제가 발생하지 않지만, 구글 앱 엔진 파일 수 제한에 도달한 것 같습니다.이 경우 앱엔진에 node_modules를 업로드하지 않는 것이 좋습니다.
대신 애플리케이션을 로컬로 빌드하고 번들된 파일만 구글 앱 엔진으로 업로드하며 앱 엔진 자체에는 업로드하지 않습니다.
angular cli의 최신 버전을 사용하는 경우ng build --prod
파일 수가 적은 dist 폴더를 생성하여 프로젝트 속도를 높일 수 있습니다.
또한 angular cli의 최고의 성능을 가진 로컬 테스트에 사용할 수 있습니다.ng serve --prod
Angular CLI를 사용하는 경우 프로젝트를 생성할 때 항상 --minimal 플래그를 사용할 수 있습니다.
ng new name --minimal
플래그로 실행해 보니 24개의 600개의 파일이 생성되고ng build --prod212KB의 dist 폴더를 생성합니다.
따라서 프로젝트에 분수대가 필요 없거나 빠르게 테스트하고 싶은 경우 이 기능은 매우 유용하다고 생각합니다.
파일 시스템이 심볼릭 링크를 지원하는 경우 적어도 이러한 모든 파일을 숨김 폴더로 강등할 수 있습니다.이렇게 하면 스마트 툴은 다음과 같습니다.tree기본적으로는 표시되지 않습니다.
mv node_modules .blergyblerp && ln -s .blergyblerp node_modules
또한 숨겨진 폴더를 사용하면 이러한 파일이 빌드 관련 중간 파일이며, 리비전 제어에 저장하거나 배포에서 직접 사용할 필요가 없다는 점을 이해할 수 있습니다.
아무 문제 없어요.package.json에서 설명한 노드 의존관계는 다음과 같습니다.
Git 허브 프로젝트 중 일부를 다운로드 받은 경우에는 angular 2 first hello world 앱에 실제로 필요하지 않은 다른 의존관계가 많을 수 있습니다.
- 각도 종속성 -templejs -typescript -tslint -docker가 있는지 확인합니다.
개발 설정에는 문제가 없습니다.
Angular CLI를 사용하는 경우 프로젝트를 생성할 때 항상 --minimal 플래그를 사용할 수 있습니다.
ng new name --minimal
언급URL : https://stackoverflow.com/questions/38718690/huge-number-of-files-generated-for-every-angular-project
'programing' 카테고리의 다른 글
| 조인 상위 3개 항목 가져오기 (0) | 2022.12.20 |
|---|---|
| 오류 2006(HY000):MySQL 서버가 사라졌습니다. (0) | 2022.12.20 |
| PDO PHP에서 쿼리 오류를 보는 방법 (0) | 2022.12.20 |
| mysql ERROR 1062 (23000) 해결 방법:키 'UK_ability_shortname'에 대한 항목 ''이(가) 중복됩니다. (0) | 2022.12.20 |
| MySQL 날짜에서 월과 연도를 추출하고 비교하려면 어떻게 해야 합니까? (0) | 2022.12.20 |