Огромное количество файлов, сгенерированных для каждого проекта Angular

Я хотел запустить простое приложение hello world для Angular.

Когда я выполнил инструкции в официальном quickstart, установка создала 32 000 файлов в моем проекте.

Я подумал, что это какая-то ошибка или я что-то пропустил, поэтому решил использовать angular -cli, но после настройки проекта Я подсчитал 41 000 файлов.

Где я ошибся? Я пропустил что-то действительно действительно очевидное?

535
02 авг. '16 в 14:04
источник поделиться
15 ответов

В вашей конфигурации нет ничего плохого.

Angular (начиная с версии 2.0) использует модули npm и зависимости для разработки. Это единственная причина, по которой вы видите такое огромное количество файлов.

Базовая установка Angular содержит транспилеры, зависимости типов, которые необходимы только для целей разработки.

Как только вы закончите разработку, все, что вам нужно сделать, это связать это приложение.

После объединения вашего приложения будет только один bundle.js файл, который затем можно развернуть на вашем сервере.

'transpiler' - это просто компилятор, благодаря @omninonsense для добавления этого.

329
02 авг. '16 в 14:26
источник
                                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

[см. это для процесса объединения ⇗]

135
03 авг. '16 в 8:33
источник

В конфигурации разработки нет ничего плохого.

Что-то не так с вашей конфигурацией production.

Когда вы разрабатываете "Angular 2 Project" или "Any Project, который основан на JS", вы можете использовать все файлы, вы можете попробовать все файлы, вы можете импортировать все файлы. Но если вы хотите обслуживать этот проект, вам нужно COMBINE структурированные файлы и избавиться от ненужных файлов.

Существует множество вариантов объединения этих файлов:

49
02 авг. '16 в 16:42
источник

Как уже упоминалось несколько человек: все файлы в каталоге 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 linting, компиляция, минимизация и т.д.)
  • 3 файла для развертывания → Только несколько запросов Http

Недостатки:

  • Высшее время сборки
  • Не лучшее решение для проектов Http 2 (см. отказ от ответственности)

Отказ от ответственности: Это хорошее решение для Http 1. *, поскольку оно минимизирует накладные расходы для каждого запроса Http. У вас есть только запрос для вашего index.html и каждого пакета - но не для 100 - 200 файлов. На данный момент это путь.

Http 2, с другой стороны, пытается минимизировать служебные данные Http, поэтому он основан на протоколе потока. Этот поток может взаимодействовать в обоих направлениях (Client ↔ Server) и в качестве причины для более разумной загрузки ресурсов (вы загружаете только нужные файлы). Поток устраняет большую часть Http-накладных расходов (менее Http-раундов).

Но это то же самое, что и с IPv6: это займет несколько лет, пока люди действительно не будут использовать Http 2

29
02 авг. '16 в 22:01
источник

Вам нужно убедиться, что вы просто развертываете папку dist (short for distributable) из своего проекта, сгенерированную с помощью Angular CLI. Это позволяет инструменту взять исходный код и его зависимости и предоставить только то, что вам нужно для запуска вашего приложения.

Считается, что существует/была проблема с CLI Angular в отношении создания сборки через `ng build -prod

Вчера (2 августа 2016 года) была выпущена релиза, которая переключила механизм сборки из broccoli + systemjs до webpack, который успешно обрабатывает производственные сборки.

Основываясь на следующих шагах:

ng new test-project
ng build --prod

Я вижу размер папки dist 1,1 МБ в 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

Примечание В настоящее время для установки версии webpack Angular cli необходимо запустить... npm install angular-cli@webpack -g

21
03 авг. '16 в 16:35
источник

Сам Angular имеет много зависимостей, а бета-версия CLI загружает в четыре раза больше файлов.

Это как создать простой проект с меньшим количеством файлов ("только" 10К файлов) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

14
02 авг. '16 в 18:20
источник

Похоже, никто не упомянул опережающую компиляцию, как описано здесь: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

До сих пор мой опыт работы с Angular заключался в том, что AoT создает самые маленькие сборки практически без времени загрузки. И самое главное, поскольку вопрос здесь о - вам нужно только отправить несколько файлов в производство.

Похоже, это связано с тем, что компилятор Angular не будет поставляться с производственными сборками, так как шаблоны компилируются "впереди времени". Также очень круто видеть, как разметка вашего HTML-шаблона преобразована в инструкции javascript, которые было бы очень трудно преобразовать в исходный HTML.

Я сделал простое видео, в котором демонстрирую размер загрузки, количество файлов и т.д. Для приложения Angular в сборке dev против AoT - которую вы можете увидеть здесь:

https://youtu.be/ZoZDCgQwnmQ

Вы найдете исходный код для демонстрации здесь:

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

И - как все остальные говорили здесь - нет ничего плохого, когда в вашей среде разработки много файлов. Вот как это со всеми зависимостями, которые идут с Angular и многими другими современными фреймворками. Но разница здесь в том, что при доставке в производство вы можете упаковать его в несколько файлов. Также вам не нужны все эти файлы зависимостей в вашем git-репозитории.

12
13 янв. '17 в 22:33
источник

На самом деле это не Angular, это происходит практически с любым проектом, использующим экосистему NodeJs/npm для его инструментария.

Эти проекты находятся внутри ваших папок node_modules и являются транзитными зависимостями, которые должны выполняться вашими прямыми зависимостями.

В node экосистемные модули обычно малы, а это означает, что вместо того, чтобы сами разрабатывать вещи, мы склонны импортировать большую часть того, что нам нужно, в форме модуля. Сюда могут входить такие мелочи, как знаменитая функция левого пэда, зачем писать сами, если не как упражнение?

Таким образом, имея много файлов, на самом деле это хорошо, значит, все очень модульно, а авторы модулей часто повторно используют другие модули. Эта простота модульности, вероятно, является одной из основных причин, по которым экосистема node росла настолько быстро.

В принципе это не должно вызывать никаких проблем, но, похоже, вы столкнулись с лимитом количества файлов движка Google. В этом случае я предлагаю не загружать node_modules в движок приложения.

вместо этого создайте приложение локально и загрузите в движок Google только связанные файлы, но не создайте сам механизм создания.

8
21 авг. '16 в 15:33
источник

Если вы используете более новую версию ng build --prod используйте ng build --prod

Это создаст папку dist, в которой будет меньше файлов, и скорость проекта увеличится.

Также для локальных испытаний с лучшими характеристиками угловых значений вы можете использовать ng serve --prod

7
10 июня '17 в 10:38
источник

если вы используете Angular CLI, вы всегда можете использовать флаг --minimal при создании проекта

ng new name --minimal

Я только что запустил его с флагом, и он создает 24 600 файлов, а ng build --prod создает папку dist 212 КБ

Так что если вам не нужны фонтаны в вашем проекте или вы просто хотите быстро что-то проверить, я думаю, что это очень полезно

5
07 дек. '17 в 1:33
источник

Вот сравнение того, что занимает больше места в проектах angular. введите описание изображения здесь

4
15 нояб. '17 в 16:49
источник

Если ваша файловая система поддерживает символические ссылки, то вы можете по крайней мере переместить все эти файлы в скрытую папку, чтобы умный инструмент, такой как tree, не отображал их по умолчанию.

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

Использование скрытой папки для этого также может способствовать пониманию того, что это промежуточные файлы, связанные со сборкой, которые не нужно сохранять в системе контроля версий или использовать непосредственно в вашем развертывании.

3
05 февр. '18 в 20:19
источник

Нет ничего плохого. Это все зависимости node, которые вы упомянули в package.json.

Просто будьте осторожны, если вы загрузите какой-либо проект-концентратор git, у него может быть много других зависимостей, которые на самом деле не требуются для приложения angular 2 first hello world:)

  • убедитесь, что у вас есть зависимости angular -rxjs - gulp - typescript -tslint -docker
2
20 окт. '16 в 20:18
источник

Как сохранить небольшой размер углового развертывания:

Посмотрите на структуру моего проекта.

Размер домашней страницы составляет 922 КБ. демонстрация

0
18 апр. '19 в 11:16
источник

вы увидите огромные файлы/папку в node_modules., которые являются пакетами, которые импортируются в модули, сервисы, компоненты. Для производства просто используйте ng build --prod, он будет генерировать каталог dist, содержащий в комплекте css, js файлы и html.Используйте это для production.Its меньше, чем MB.

0
06 дек. '17 в 3:43

Посмотрите другие вопросы по меткам или Задайте вопрос