Số lượng lớn tệp được tạo cho mỗi dự án Angular

594

Tôi muốn bắt đầu một ứng dụng hello world đơn giản cho Angular.

Khi tôi làm theo các hướng dẫn trong bản chính thức, hãy bắt đầu cài đặt đã tạo ra 32.000 tệp trong dự án của tôi.

Tôi nghĩ rằng đây là một số sai lầm hoặc tôi đã bỏ lỡ một cái gì đó, vì vậy tôi quyết định sử dụng angular-cli , nhưng sau khi thiết lập dự án, tôi đã đếm được 41.000 tệp.

Tôi đã đi sai ở đâu? Tôi có thiếu một cái gì đó thực sự rõ ràng?

javascript  angular 
— Moshe Shaham
nguồn
98
Đó là bình thường đối với các dự án được cung cấp bởi NPM.
— Everettss
115
@hendrix vì việc triển khai của tôi (công cụ ứng dụng google) chỉ cho phép các tệp 10K
— Moshe Shaham
49
Đối với bất kỳ ai tò mò về số phiếu bầu cho câu hỏi này và câu trả lời của nó, điều này đã làm cho trang nhất HN. news.ycombinator.com/item?id=12209028
— ceejayoz
50
@hendrix - Tôi cá là bạn cũng cam kết các tệp .DS_Store cho git.
— Martin Konecny
61
Tôi nghĩ rằng "Nếu ứng dụng hello world của bạn hoạt động, mọi thứ đều ổn" không phải là một triết lý tốt để làm theo, đặc biệt là đối với người đang học. OP hoàn toàn đúng khi đặt câu hỏi tại sao có quá nhiều tệp được tạo ra. Bản thân ví dụ chỉ tham khảo 5 tệp. Và thành thật mà nói, bất kỳ ứng dụng nào có nhiều tệp hơn các chữ cái trong đầu ra của nó nên được đặt câu hỏi.
— Shawn

Câu trả lời:

362

Không có gì sai với cấu hình của bạn.

Angular (kể từ phiên bản 2.0) sử dụng các mô-đun npm và phụ thuộc để phát triển. Đó là lý do duy nhất bạn thấy một số lượng lớn các tập tin như vậy.

Một thiết lập cơ bản của Angular chứa transpiler, các phụ thuộc đánh máy chỉ cần thiết cho mục đích phát triển.

Một khi bạn đã hoàn thành việc phát triển, tất cả những gì bạn cần làm là đóng gói ứng dụng này.

Sau khi đóng gói ứng dụng của bạn, sẽ chỉ có một bundle.jstệp mà bạn có thể triển khai trên máy chủ của mình.

'transpiler' chỉ là một trình biên dịch, cảm ơn @omninonsense đã thêm nó.

— Bhushan Gadekar
nguồn
7
Nó cũng thường mang dữ liệu thử nghiệm và kiểm tra và xây dựng các công cụ cho các phụ thuộc và phụ thuộc của chúng, v.v.
— Benjamin Gruenbaum
63
Một "transpiler" chỉ là một trình biên dịch.
— omninonsense
32
nhưng biên dịch sang ngôn ngữ khác thay vì mã byte hoặc mã máy
— Hunter McMillen
32
@HunterMcMillen Mã Byte và / hoặc Mã máy là một ngôn ngữ khác. Thuật ngữ "transpiler" không có nghĩa bổ sung hơn "trình biên dịch".
— Brandon Buck
76
Đối với tất cả những người liên quan Tôi không chắc rằng đối số ngữ nghĩa thực sự phù hợp với câu hỏi của OP ^^
— Dan Pantry
144 
                                Typical Angular2 Project

                       Tệp                   gói NPM (Phát triển) Tệp thế giới thực (Triển khai) 

@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

[ xem phần này để biết quy trình đóng gói ]

— Ankit Singh
nguồn
24
Tôi đoán -3đã được đưa ra vì đã không làm tổng, nhưng bây giờ tôi có :)
— Ankit Singh
1
bạn có ý nghĩa gì với các tập tin trong thế giới thực?
— yeahman
1
@yeahman "tập tin thế giới thực" là số lượng tập tin khi dự án của bạn được triển khai hoặc đang sản xuất .
— Maarti
Ngoài ra số lượng kích thước, chỉ có 3 tệp, nhưng chúng có thể rất lớn (đối với web)
— pdem
51

Không có gì sai với cấu hình phát triển của bạn .

Một cái gì đó sai với cấu hình sản xuất của bạn .

Khi bạn phát triển "Dự án góc 2" hoặc "Bất kỳ dự án nào dựa trên JS", bạn có thể sử dụng tất cả các tệp, bạn có thể thử tất cả các tệp, bạn có thể nhập tất cả các tệp. Nhưng nếu bạn muốn phục vụ dự án này, bạn cần COMBINE tất cả các tệp có cấu trúc và loại bỏ các tệp vô dụng.

Có rất nhiều tùy chọn để kết hợp các tệp này lại với nhau:

— bão
nguồn
2
Bạn không nên (cần dẫn nguồn) để ghép các tệp lại với nhau trên máy chủ. Nhiều nhất, tôi sẽ sử dụng một bộ chuyển mã.
— Dan Pantry
1
@DanPantry Transpilers là trình biên dịch nguồn-nguồn. Tôi nghĩ rằng họ chỉ có thể thay đổi "X" thành "JS". Số lượng tập tin là như nhau.
— cơn bão
1
.. Vâng, nhưng tôi không chắc về quan điểm của bạn. Quan điểm của tôi là có lẽ bạn không nên cố gắng thu nhỏ mã máy chủ (bằng cách ghép các tệp và do đó giảm kích thước tệp). Nhiều nhất, bạn nên sử dụng Babel trên mã của mình nếu bạn đang sử dụng các tính năng chảy máu như async / await.
— Dan Pantry
2
@DanPantry Tôi đồng ý với bạn. Nhưng trên người hỏi ý kiến ​​cho biết "bởi vì việc triển khai của tôi (công cụ ứng dụng google) chỉ cho phép các tệp 10K". Trong những điều kiện này, chúng ta cần giảm thiểu số lượng tập tin.
— cơn bão
4
Tôi đồng ý với bạn nhưng OP dường như có vấn đề XY ở đây
— Dan Pantry
30

Như nhiều người đã đề cập: Tất cả các tệp trong thư mục node_modules của bạn (vị trí NPM cho các gói) là một phần của phụ thuộc dự án của bạn (Cái gọi là phụ thuộc trực tiếp). Ngoài ra, các phụ thuộc của bạn cũng có thể có các phụ thuộc riêng, v.v. (Cái gọi là phụ thuộc bắc cầu). Vài vạn tập tin không có gì đặc biệt.

Vì bạn chỉ được phép tải lên 10.000 tệp (Xem bình luận), tôi sẽ sử dụng công cụ đóng gói. Công cụ này sẽ gói tất cả JavaScript, CSS, HTML, v.v. của bạn và tạo một gói duy nhất (hoặc nhiều hơn nếu bạn chỉ định chúng). Index.html của bạn sẽ tải gói này và đó là nó.

Tôi là một fan hâm mộ của webpack, vì vậy giải pháp webpack của tôi sẽ tạo ra một gói ứng dụng và gói nhà cung cấp (Đối với ứng dụng hoạt động đầy đủ, hãy xem tại đây https://github.com/swaechter/project-collection/tree/master/web-angular2- ví dụ ):

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

Ưu điểm:

  • Dòng xây dựng đầy đủ (TS linting, biên dịch, thu nhỏ, v.v.)
  • 3 tệp để triển khai -> Chỉ một vài yêu cầu http

Nhược điểm:

  • Thời gian xây dựng cao hơn
  • Không phải là giải pháp tốt nhất cho các dự án http 2 (Xem từ chối trách nhiệm)

Tuyên bố từ chối trách nhiệm: Đây là một giải pháp tốt cho http 1. *, vì nó giảm thiểu chi phí cho mỗi yêu cầu http. Bạn chỉ có một yêu cầu cho index.html và mỗi gói - nhưng không phải cho 100 - 200 tệp. Hiện tại, đây là con đường để đi.

Mặt khác, HTTP 2 cố gắng giảm thiểu chi phí hoạt động, do đó, nó dựa trên giao thức truyền phát. Luồng này có thể giao tiếp theo cả hai hướng (Máy khách <-> Máy chủ) và vì lý do đó, có thể tải tài nguyên thông minh hơn (Bạn chỉ tải các tệp cần thiết). Luồng giúp loại bỏ phần lớn chi phí http (Chuyến đi vòng ít http).

Nhưng nó giống như với IPv6: Sẽ mất vài năm cho đến khi mọi người thực sự sử dụng Http 2

— swaechter
nguồn
1
Mặc dù vậy, không cần thiết, vì OP đã đề cập đến việc sử dụng gói angular-cliđi kèm (gói webpack được đề xuất tương tự).
— mattarau
2
@mdentinho Vâng, trong các bản phát hành hiện đại hơn. Nhưng năm 2016 SystemJS và CLI đã đi đúng hướng (Rất vui vì chúng tôi có webpack ngay bây giờ)
— swaechter
21

Bạn cần đảm bảo rằng bạn chỉ đang triển khai thư mục dist (viết tắt của phân phối) từ dự án của bạn được tạo bởi Angular CLI . Điều này cho phép công cụ lấy mã nguồn của bạn và nó phụ thuộc và chỉ cung cấp cho bạn những gì bạn cần để chạy ứng dụng của bạn.

Điều đó được nói rằng có / đã có một vấn đề với Angular CLI liên quan đến các bản dựng sản xuất thông qua `ng build --prod

Hôm qua (ngày 02 tháng 8 năm 2016) là một phiên bản đã được thực hiện mà chuyển sang cơ chế xây dựng từ bông cải xanh + systemjs để webpack mà xử lý thành công sản xuất xây dựng.

Dựa trên các bước sau:

ng new test-project
ng build --prod

Tôi đang thấy distkích thước thư mục 1,1 MB trên 14 tệp được liệt kê ở đây:

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

Lưu ý Hiện tại để cài đặt phiên bản webpack của cli góc, bạn phải chạy ...npm install angular-cli@webpack -g

— Brocco
nguồn
12

Có vẻ như không ai đã đề cập đến Biên dịch trước thời gian như được mô tả ở đây: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Kinh nghiệm của tôi với Angular cho đến nay là AoT tạo ra các bản dựng nhỏ nhất mà hầu như không có thời gian tải. Và quan trọng nhất như câu hỏi ở đây là về - bạn chỉ cần gửi một vài tệp để sản xuất.

Điều này có vẻ là do trình biên dịch Angular sẽ không được cung cấp cùng với các bản dựng sản xuất vì các mẫu được biên dịch "Trước thời gian". Thật tuyệt khi thấy đánh dấu mẫu HTML của bạn được chuyển đổi thành các hướng dẫn javascript, rất khó để chuyển đổi kỹ thuật thành HTML gốc.

Tôi đã tạo một video đơn giản trong đó tôi chứng minh kích thước tải xuống, số lượng tệp, v.v. cho ứng dụng Angular trong bản dựng dev vs AoT - mà bạn có thể xem tại đây:

https://youtu.be/ZoZDCgQwnmQ

Bạn sẽ tìm thấy mã nguồn cho bản demo ở đây:

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

Và - như tất cả những người khác đã nói ở đây - không có gì sai khi có nhiều tệp trong môi trường phát triển của bạn. Đó là cách nó diễn ra với tất cả các phụ thuộc đi kèm với Angular và nhiều khung hiện đại khác. Nhưng sự khác biệt ở đây là khi vận chuyển đến sản xuất, bạn sẽ có thể đóng gói thành một vài tệp. Ngoài ra, bạn không muốn tất cả các tệp phụ thuộc này trong kho git của mình.

— Peter Salomonsen
nguồn
8

Đây thực sự không phải là cụ thể của Angular, nó xảy ra với hầu hết mọi dự án sử dụng hệ sinh thái NodeJs / npm cho công cụ của nó.

Các dự án đó nằm trong các thư mục node_modules của bạn và là các phụ thuộc quá cảnh mà các phụ thuộc trực tiếp của bạn cần chạy.

Trong các mô-đun hệ sinh thái nút thường nhỏ, có nghĩa là thay vì tự phát triển mọi thứ, chúng ta có xu hướng nhập hầu hết những gì chúng ta cần dưới dạng mô-đun. Điều này có thể bao gồm những điều nhỏ như chức năng bên trái nổi tiếng, tại sao lại tự viết nó nếu không phải là một bài tập?

Vì vậy, có rất nhiều tệp thực sự là một điều tốt, điều đó có nghĩa là mọi thứ đều rất mô-đun và các tác giả mô-đun thường xuyên sử dụng lại các mô-đun khác. Sự dễ dàng của mô-đun này có lẽ là một trong những lý do chính tại sao hệ sinh thái nút phát triển quá nhanh.

Về nguyên tắc, điều này không gây ra bất kỳ vấn đề nào, nhưng có vẻ như bạn gặp phải giới hạn số lượng tệp công cụ ứng dụng google. Trong trường hợp đó, tôi đề nghị không tải node_modules lên công cụ ứng dụng.

thay vào đó, hãy xây dựng ứng dụng cục bộ và tải lên công cụ ứng dụng google chỉ các tệp được đóng gói nhưng không được xây dựng trong chính công cụ ứng dụng.

— Đại học góc
nguồn
8

Nếu bạn đang sử dụng phiên bản mới hơn của cli, hãy sử dụng ng build --prod

Nó sẽ tạo thư mục dist có ít tệp hơn và tốc độ dự án sẽ tăng lên.

Ngoài ra để thử nghiệm tại địa phương với hiệu suất tốt nhất của cli góc bạn có thể sử dụng ng serve --prod

— Jalay Oza
nguồn
6

nếu bạn sử dụng Angular CLI, bạn luôn có thể sử dụng cờ - cực tiểu khi bạn tạo dự án 

ng new name --minimal

Tôi vừa chạy nó với cờ và nó tạo ra 24 600 tệp và ng build --prodtạo thư mục dist 212 KB

Vì vậy, nếu bạn không cần đài phun nước trong dự án của bạn hoặc chỉ muốn nhanh chóng thử nghiệm cái gì đó thì tôi nghĩ nó khá hữu ích

— Chất béo
nguồn
5

Tạo một dự án mới với cli góc gần đây và thư mục node_modules là 270 mb, vì vậy, điều này là bình thường nhưng tôi chắc chắn rằng hầu hết các nhà phát triển mới cho thế giới góc cạnh này đều nghi ngờ điều này và có giá trị. Đối với một dự án mới đơn giản, sẽ có ý nghĩa để giảm bớt sự phụ thuộc xuống có thể một chút;) Không biết tất cả các gói phụ thuộc vào điều gì có thể hơi đáng sợ, đặc biệt là với các nhà phát triển mới lần đầu tiên thử nghiệm. Thêm vào thực tế hầu hết các hướng dẫn cơ bản không thảo luận về cài đặt triển khai để chỉ nhận các tệp được xuất. Tôi không tin ngay cả hướng dẫn được cung cấp trên trang web chính thức góc cạnh nói về cách triển khai dự án đơn giản.

Có vẻ như thư mục node_modules là thủ phạm

— maguy
nguồn
4

Dưới đây là so sánh về những gì chiếm nhiều không gian hơn trong các dự án góc cạnh. nhập mô tả hình ảnh ở đây

— Jagadesha NH
nguồn
3

Nếu hệ thống tệp của bạn hỗ trợ các liên kết tượng trưng, ​​thì ít nhất bạn có thể đưa tất cả các tệp này vào một thư mục ẩn - để một công cụ thông minh như treesẽ không hiển thị chúng theo mặc định.

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

Sử dụng một thư mục ẩn cho điều này cũng có thể khuyến khích sự hiểu rằng đây là các tệp trung gian liên quan đến bản dựng không cần lưu vào kiểm soát sửa đổi - hoặc được sử dụng trực tiếp trong triển khai của bạn.

— quý tộc
nguồn
Mẩu bánh mì của tôi đã cũ đi, nhưng đây là những gì nó đề cập đến: web.archive.org/web/20150216184318/https://docs.npmjs.com/misc/...
— nobar
2

Không có gì sai. Đây là tất cả các phụ thuộc nút mà bạn đã đề cập trong gói.json.

Hãy cẩn thận nếu bạn đã tải xuống một số dự án git hub, nó có thể có nhiều phụ thuộc khác không thực sự cần cho ứng dụng hello world đầu tiên 2 góc cạnh :)

  • hãy chắc chắn rằng bạn có các phụ thuộc góc -rxjs -gulp -typescript -tslint -docker
— piyush anwekar
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.