[javascript] 모든 Angular 프로젝트에 대해 생성 된 엄청난 수의 파일

JAVASCRIPT / 글쓴이

Angular에 대한 간단한 hello world 앱을 시작하고 싶었습니다.

공식 빠른 시작 의 지침에 따라 설치시 프로젝트에 32,000 개의 파일이 생성되었습니다.

나는 이것이 실수이거나 무언가를 놓쳤다 고 생각했기 때문에 angular-cli 을 사용하기로 결정 했지만 프로젝트를 설정 한 후 41,000 개의 파일을 계산했습니다.

내가 어디로 잘못 갔니? 내가 정말로 분명한 것을 놓치고 있습니까?

답변

구성에 아무런 문제가 없습니다.

Angular (버전 2.0부터)는 개발을 위해 npm 모듈과 종속성을 사용합니다. 그것이 수많은 파일을 보는 유일한 이유입니다.

각도의 기본 설정은 transpiler, typings 종속성이 포함되어 필수 개발 용으로 만 사용합니다.

개발이 끝나면이 응용 프로그램을 번들로 제공하기 만하면됩니다.

응용 프로그램을 번들링 한 후에는 bundle.js서버에 배포 할 수있는 파일이 하나만 있습니다.

‘transpiler’ 는 컴파일러 일뿐입니다. @omninonsense를 추가해 주셔서 감사합니다.

답변

                                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

*: bundled with @angular

[ 동고 과정은 see ]

답변

개발 구성 에는 아무런 문제가 없습니다 .

프로덕션 구성에 문제가 있습니다 .

“Angular 2 프로젝트”또는 “JS 기반의 모든 프로젝트”를 개발할 때 모든 파일을 사용할 수 있으며 모든 파일을 시도 할 수 있으며 모든 파일을 가져올 수 있습니다. 이 프로젝트를 제공하려는 경우하지만 당신은 할 필요가 COMBINE 모든 구성 파일 및 쓸모없는 파일을 제거.

이 파일들을 결합하기위한 많은 옵션이 있습니다 :

답변

여러 사람들이 이미 언급했듯이 node_modules 디렉토리의 모든 파일 (패키지의 NPM 위치)은 프로젝트 종속성 (소위 직접 종속성)의 일부입니다. 그 외에도 종속성은 고유 한 종속성 등을 가질 수 있습니다 (소위 전이 종속성). 수만 개의 파일은 특별한 것이 아닙니다.

10,000 개의 파일 만 업로드 할 수 있기 때문에 (댓글 참조) 번 들러 엔진을 사용합니다. 이 엔진은 모든 JavaScript, CSS, HTML 등을 번들로 묶어 하나의 번들을 생성합니다 (또는 지정한 경우 그 이상). index.html이이 번들을로드합니다.

나는 웹 팩의 팬이므로 웹 팩 솔루션은 응용 프로그램 번들과 공급 업체 번들을 만듭니다 (전체 작동하는 응용 프로그램은 여기 https://github.com/swaechter/project-collection/tree/master/web-angular2- 참조) 예 ) :

index.html

<!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.js

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 일) 제작 메커니즘을 브로콜리 + systemjs 에서 웹팩 으로 전환하여 프로덕션 빌드를 성공적으로 처리 하는 릴리스가 완료 되었습니다.

이 단계를 기반으로 :

ng new test-project
ng build --prod

나는보고하고 dist의 폴더 크기 1.1 MB 어 크로스 (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

참고 현재 각도 cli의 웹팩 버전을 설치하려면 다음을 실행해야합니다.npm install angular-cli@webpack -g

답변

Angular 자체에는 많은 종속성이 있으며 CLI의 베타 버전은 4 배 더 많은 파일을 다운로드합니다.

간단한 프로젝트를 만드는 방법은 파일을 줄입니다 ( “10K 파일 만”)
https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

답변

아무도 여기에 설명 된대로 Ahead-of-Time Compilation을 언급하지 않은 것 같습니다 : https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

지금까지 Angular에 대한 나의 경험은 AoT가 로딩 시간이 거의없이 가장 작은 빌드를 생성한다는 것입니다. 여기서 가장 중요한 질문은 프로덕션에 몇 개의 파일 만 보내면됩니다.

템플릿이 “Ahead of Time”으로 컴파일되므로 Angular 컴파일러는 프로덕션 빌드와 함께 제공되지 않기 때문입니다. HTML 템플릿 마크 업이 자바 스크립트 명령어로 변환되어 원래의 HTML로 리버스 엔지니어링하기가 매우 어려울 수도 있습니다.

dev에서 AoT 빌드의 Angular 앱에 대한 다운로드 크기, 파일 수 등을 보여주는 간단한 비디오를 만들었습니다. 여기에서 볼 수 있습니다.

https://youtu.be/ZoZDCgQwnmQ

데모 소스 코드는 다음과 같습니다.

https://github.com/fintechneo/angular2-templates

그리고 다른 모든 사람들이 여기에서 말했듯이 개발 환경에 많은 파일이있을 때 아무런 문제가 없습니다. 이것이 Angular와 함께 제공되는 모든 의존성 및 다른 많은 현대 프레임 워크와 함께하는 방식입니다. 그러나 여기서 차이점은 프로덕션으로 배송 할 때 몇 개의 파일로 압축 할 수 있어야한다는 것입니다. 또한 git 저장소에 이러한 종속성 파일을 모두 원하지는 않습니다.