Я хотел запустить простое приложение hello world для Angular.
Когда я выполнил инструкции в официальном quickstart, установка создала 32 000 файлов в моем проекте.
Я подумал, что это какая-то ошибка или я что-то пропустил, поэтому решил использовать angular -cli, но после настройки проекта Я подсчитал 41 000 файлов.
Где я ошибся? Я пропустил что-то действительно действительно очевидное?
В вашей конфигурации нет ничего плохого.
Angular (начиная с версии 2.0) использует модули npm и зависимости для разработки. Это единственная причина, по которой вы видите такое огромное количество файлов.
Базовая установка Angular содержит транспилеры, зависимости типов, которые необходимы только для целей разработки.
Как только вы закончите разработку, все, что вам нужно сделать, это связать это приложение.
После объединения вашего приложения будет только один 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
В конфигурации разработки нет ничего плохого.
Что-то не так с вашей конфигурацией production.
Когда вы разрабатываете "Angular 2 Project" или "Any Project, который основан на 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));
}
Преимущества:
Недостатки:
Отказ от ответственности: Это хорошее решение для Http 1. *, поскольку оно минимизирует накладные расходы для каждого запроса Http. У вас есть запрос только для вашего index.html и каждого пакета, но не для 100-200 файлов. На данный момент это путь.
Http 2, с другой стороны, пытается минимизировать издержки Http, поэтому он основан на потоковом протоколе. Этот поток может обмениваться данными в обоих направлениях (клиент <-> сервер), и поэтому возможна более интеллектуальная загрузка ресурсов (вы загружаете только необходимые файлы). Поток устраняет большую часть издержек Http (Меньше обходов Http).
Но это так же, как с IPv6: Потребуются несколько лет, пока люди действительно будут использовать Http 2
Вам нужно убедиться, что вы просто развертываете папку 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 [email protected] -g
Сам 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://github.com/fintechneo/angular2-templates
И - как все остальные говорили здесь - нет ничего плохого, когда в вашей среде разработки много файлов. Вот как это со всеми зависимостями, которые идут с Angular и многими другими современными фреймворками. Но разница здесь в том, что при доставке в производство вы можете упаковать его в несколько файлов. Также вам не нужны все эти файлы зависимостей в вашем git-репозитории.
На самом деле это не Angular, это происходит практически с любым проектом, использующим экосистему NodeJs/npm для его инструментария.
Эти проекты находятся внутри ваших папок node_modules и являются транзитными зависимостями, которые должны выполняться вашими прямыми зависимостями.
В node экосистемные модули обычно малы, а это означает, что вместо того, чтобы сами разрабатывать вещи, мы склонны импортировать большую часть того, что нам нужно, в форме модуля. Сюда могут входить такие мелочи, как знаменитая функция левого пэда, зачем писать сами, если не как упражнение?
Таким образом, имея много файлов, на самом деле это хорошо, значит, все очень модульно, а авторы модулей часто повторно используют другие модули. Эта простота модульности, вероятно, является одной из основных причин, по которым экосистема node росла настолько быстро.
В принципе это не должно вызывать никаких проблем, но, похоже, вы столкнулись с лимитом количества файлов движка Google. В этом случае я предлагаю не загружать node_modules в движок приложения.
вместо этого создайте приложение локально и загрузите в движок Google только связанные файлы, но не создайте сам механизм создания.
Если вы используете более новую версию ng build --prod используйте ng build --prod
Это создаст папку dist, в которой будет меньше файлов, и скорость проекта увеличится.
Также для локальных испытаний с лучшими характеристиками угловых значений вы можете использовать ng serve --prod
если вы используете Angular CLI, вы всегда можете использовать флаг --minimal при создании проекта
ng new name --minimal
Я только что запустил его с флагом, и он создает 24 600 файлов, а ng build --prod создает папку dist 212 КБ
Так что если вам не нужны фонтаны в вашем проекте или вы просто хотите быстро что-то проверить, я думаю, что это очень полезно
Вот сравнение того, что занимает больше места в проектах angular.
Если ваша файловая система поддерживает символические ссылки, то вы можете по крайней мере переместить все эти файлы в скрытую папку, чтобы умный инструмент, такой как tree, не отображал их по умолчанию.
mv node_modules .blergyblerp && ln -s .blergyblerp node_modules
Использование скрытой папки для этого также может способствовать пониманию того, что это промежуточные файлы, связанные со сборкой, которые не нужно сохранять в системе контроля версий или использовать непосредственно в вашем развертывании.
Нет ничего плохого. Это все зависимости node, которые вы упомянули в package.json.
Просто будьте осторожны, если вы загрузите какой-либо проект-концентратор git, у него может быть много других зависимостей, которые на самом деле не требуются для приложения angular 2 first hello world:)
вы увидите огромные файлы/папку в node_modules., которые являются пакетами, которые импортируются в модули, сервисы, компоненты. Для производства просто используйте ng build --prod, он будет генерировать каталог dist, содержащий в комплекте css, js файлы и html.Используйте это для production.Its меньше, чем MB.
Как сохранить небольшой размер углового развертывания:
Посмотрите на структуру моего проекта.
Размер домашней страницы составляет 922 КБ. демонстрация
Создание нового проекта с angular cli и папкой node_modules было 270 Мб, так что да, это нормально, но я уверен, что большинство новых разработчиков в angular world ставят это под сомнение и действительно. Для простого нового проекта имеет смысл урезать зависимости, может быть, чуть-чуть;) Незнание того, от чего зависят все пакеты, может немного нервировать, особенно для новых разработчиков, которые впервые попробовали отключиться. Добавьте к тому, что в большинстве базовых руководств не обсуждаются параметры развертывания, чтобы получить только необходимые экспортированные файлы. Я не верю, что даже учебник, предлагаемый на официальном официальном сайте, рассказывает о том, как развернуть простой проект.
