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

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

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

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

Moshe Shaham

Ответов: 14

Ответы (14)

Все в порядке с вашей конфигурацией.

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

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

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

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

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

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

Вот как создать простой проект будет меньше файлов ("всего" 10К файлов) 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 создает самые маленькие сборки практически без времени загрузки. И, что наиболее важно, вопрос о том, что вам нужно отправить в производство всего несколько файлов.

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

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

https://youtu.be/ZoZDCgQwnmQ

Здесь вы найдете исходный код демонстрации:

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

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

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

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

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

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

ng new name --minimal

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

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

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

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

  • убедитесь, что у вас есть угловые зависимости -rxjs -глоток -машинопись -tslint -докер

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

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

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

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

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

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

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

При этом есть / была проблема с Angular CLI в отношении производственных сборок через `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

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

Как уже упоминалось несколькими людьми: все файлы в вашем каталоге node_modules (расположение NPM для пакетов) являются частью зависимостей вашего проекта (так называемые прямые зависимости). В дополнение к этому ваши зависимости также могут иметь свои собственные зависимости и так далее и т. Д. (Так называемые транзитивные зависимости). Несколько десятков тысяч файлов ничего особенного.

Поскольку вам разрешено загружать только 10'000 файлов (см. Комментарии), я бы выбрал движок сборщика. Этот движок объединит весь ваш JavaScript, CSS, HTML и т. Д. И создаст один пакет (или больше, если вы их укажете). Ваш index.html загрузит этот пакет и все.

Я фанат webpack, поэтому мое решение webpack создаст пакет приложения и пакет поставщика (полное рабочее приложение см. Здесь https://github.com/swaechter/project-collection/tree/master/web-angular2-example):

index.html




    
    Webcms


Applikation wird geladen, bitte warten...




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 1. *, поскольку оно минимизирует накладные расходы для каждого запроса Http. У вас есть запрос только для вашего index.html и каждого пакета, но не для 100-200 файлов. На данный момент это правильный путь.

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

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

Все в порядке с вашей конфигурацией разработки.

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

ng new name --minimal

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

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

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

                                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

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

Недавно был создан новый проект с angular cli, а папка node_modules была 270 МБ, так что да, это нормально, но я уверен, что большинство новых разработчиков в мире angular задаются этим вопросом и действительно. Для простого нового проекта имело бы смысл уменьшить зависимости, может быть, немного;) Незнание, от чего зависят все пакеты, может немного расстраивать, особенно новых разработчиков, пробующих cli в первый раз. Добавьте к этому тот факт, что в большинстве базовых руководств не обсуждаются параметры развертывания, чтобы получить только необходимые экспортированные файлы. Я не верю, что даже в руководстве, предлагаемом на официальном сайте angular, рассказывается о том, как развернуть простой проект.

Looks like the node_modules folder is the culprit

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

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

Когда вы разрабатываете «Angular 2 Project» или «Любой проект, основанный на JS», вы можете использовать все файлы, вы можете попробовать все файлы, вы можете импортировать все файлы. Но если вы хотите обслуживать этот проект, вам необходимо ОБЪЕДИНЯТЬ все структурированные файлы и избавиться от бесполезных файлов.

Есть много вариантов объединения этих файлов вместе:

2022 WebDevInsider