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




앵귤러5 (9)

Angular CLI를 사용하는 경우 프로젝트를 만들 때 항상 --minimal 플래그를 사용할 수 있습니다

ng new name --minimal

방금 플래그로 실행했으며 ng build --prod 개의 파일을 만들고 ng build --prodng build --prod dist 폴더를 생성합니다.

프로젝트에 분수가 필요하지 않거나 무언가를 빨리 테스트하고 싶다면 꽤 유용하다고 생각합니다.

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

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

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

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



다음은 각도 프로젝트에서 더 많은 공간을 차지하는 것을 비교 한 것입니다.


아무 문제가 없다. 이들은 package.json에서 언급 한 모든 노드 종속성입니다.

git hub 프로젝트 중 일부를 다운로드 한 경우 조심하십시오 .angular 2 first hello world 앱에는 실제로 필요하지 않은 많은 다른 종속성이있을 수 있습니다 :)

  • 각도 의존성이 있는지 확인하십시오 -rxjs -gulp -typescript -tslint -docker

앵귤러 ng build --prod 의 최신 버전을 사용하는 경우 ng build --prod 사용 ng build --prod

파일이 적은 dist 폴더를 생성하고 프로젝트 속도가 증가합니다.

또한 각진 ng serve --prod 의 최상의 성능을 가진 로컬 테스트를 위해 ng serve --prod 사용할 수 있습니다


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

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

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

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를 사용할 때까지 몇 년이 걸립니다.


파일 시스템이 심볼릭 링크를 지원하는 경우 tree 와 같은 스마트 도구가 기본적으로 표시하지 않도록 이러한 모든 파일을 숨겨진 폴더로 적어도 관련시킬 수 있습니다.

mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

이를 위해 숨겨진 폴더를 사용하면 파일이 개정 관리에 저장하거나 배포에서 직접 사용할 필요가없는 빌드 관련 중간 파일이라는 것을 이해하는 데 도움이 될 수 있습니다.


angular-cli 의해 생성 된 프로젝트에서 dist (배포 가능)의 폴더를 배포해야합니다. 이를 통해 도구가 소스 코드와 종속성을 가져 와서 응용 프로그램을 실행하는 데 필요한 것만 제공 할 수 있습니다.

ng build --prod를 통한 프로덕션 빌드와 관련하여 Angular CLI에 문제가 있다고합니다.

어제 (2016 년 8 월 2 일) 빌드 메커니즘을 broccoli + systemjs 에서 webpack 으로 전환하여 프로덕션 빌드를 성공적으로 처리하는 릴리스가 완료되었습니다.

이 단계를 기반으로 :

ng new test-project
ng build --prod

여기에 나열된 14 개 파일 에서 dist 폴더 크기가 1.1MB로 표시됩니다.

./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 [email protected] -g


                                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