Что это лучший способ, чтобы комплект угловой (версия 2, 4, 6, ...) для производства на реальном веб-сервере.
Пожалуйста, включите угловой вариант в ответы, чтобы мы могли лучше отслеживать, когда она движется в более поздних версиях.
2.х, 4.х, 5.х, 6.х, 7.х, 8.х
(машинопись) с углового командной строкиНПМ установки -г @угловое/ЦПИ
НГ новый projectFolder
создает новое приложениеНГ построить-прод
(запускать в командной строке, когда каталог projectFolder
)пакет флаг прод
для производства (см. угловые документацию для списка выбора включен с флагом производства).
для меня в округе dist/*; сделать кодом Brotli $я; сделано`
пучки генерируются по умолчанию для projectFolder/Р(/$projectFolder по 6)
Размеры с угловым 8.2.11
с АОН `8.3.13 и CSS вариант без углового маршрутизации
дист/главная-[Эс-версия].[хеш].Яш
ваше приложение в комплекте [ в ES5 размер: 188 КБ за новый угловой приложения командной строки пустые, 44 КБ сжатый].дист/полифилл-[Эс-версия].[хеш].bundle.js
зависимости полифилл (@угловые, RxJS...) в комплекте [ в ES5, размер: 122 КБ за новый угловой приложения командной строки пустые, 36 КБ сжатый].н/во время выполнения-[Эс-версия].[хеш].webpack погрузчик bundle.js
дист/стиль.[хеш].пакет.определения CSS
стиль Вы можете сделать предварительный просмотр вашего приложения с помощью НГ подавать команду-прод
, которая начинается локальный HTTP-сервер, чтобы приложение с файлы можно с помощью http://localhost:4200.
Для использования продукцию, вы должны развернуть все файлы из папки р
в HTTP-сервер вашего выбора.
в
НПМ запустить Bundle
(выполнить в cmd, когда direcory является projectFolder)пакеты формируются с projectFolder / жгуты /
bundles/dependencies.bundle.js
[ размер: ~ 1 МБ (как можно меньше) ]bundles/app.bundle.js
[ размер: зависит от вашего проекта, Мой ~ 0.5 Мб ]</БР>
var gulp = require('gulp'),
tsc = require('gulp-typescript'),
Builder = require('systemjs-builder'),
inlineNg2Template = require('gulp-inline-ng2-template');
gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});
gulp.task('inline-templates', function () {
return gulp.src('app/**/*.ts')
.pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
.pipe(tsc({
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false
}))
.pipe(gulp.dest('dist/app'));
});
gulp.task('bundle-app', ['inline-templates'], function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist-systemjs.config.js');
return builder
.bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
gulp.task('bundle-dependencies', ['inline-templates'], function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist-systemjs.config.js');
return builder
.bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
</БР>
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
***
"gulp": "gulp",
"rimraf": "rimraf",
"bundle": "gulp bundle",
"postbundle": "rimraf dist"
},
"license": "ISC",
"dependencies": {
***
},
"devDependencies": {
"rimraf": "^2.5.2",
"gulp": "^3.9.1",
"gulp-typescript": "2.13.6",
"gulp-inline-ng2-template": "2.0.1",
"systemjs-builder": "^0.15.16"
}
}
</БР>
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app/boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.asp's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
</БР>
var map = {
'app': 'dist/app',
};
dist-systemjs.config.js тег после расслоения теги бы еще разрешение на запуск программы, но в пачке зависимостей будут игнорироваться и зависимости будут загружаться из папки
папки node_modules`.</БР>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<base href="/"/>
<title>Angular</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<my-app>
loading...
</my-app>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>
<script>
System.import('app/boot').catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
Лучшее, что я мог еще сделать :)
<Н2>угловой 2 с Webpack (без установки ЦПИ)</Н2>
<Н3>1 - в учебнике по команде Angular2</Н3>
Команда Angular2 опубликовал учебник для использования Webpack
Я создал и разместил файлы из учебника в небольшом проект семена на GitHub. Так можно быстро попробовать рабочего процесса.
Инструкция:
НПМ установки
НПМ начать. Для развития. Это позволит создать виртуальную "в папке dist" Что будет livereloaded в ваш адрес localhost.
НПМ запустить сборки. Для производства. и"Это позволит создать физические и"Р" в папке версии, чем могут быть отправлены на сервер. В папке dist находится в 7,8 МБ, но только 234KB фактически требуется для загрузки страницы в веб-браузере. <БР><БР> <Н3>2 - стартовый комплект на базе webkit</Н3>
Этот Webpack стартовый комплект предлагает некоторые дополнительные функции тестирования, чем выше учебник и, кажется, довольно популярны.
Угловой.Ио есть краткое руководство. Я скопировал этот учебник и расширены некоторые простые задачи, глоток за комплектации все, что в папке dist, которая может быть скопирована на сервере и работает просто так. Я пытался оптимизировать все, чтобы хорошо работать на Джинкис ки, поэтому папки node_modules могут быть кэшированы и Дон'т должны быть скопированы.
Исходный код примера приложения на GitHub: https://github.com/Anjmao/angular2-production-workflow
Узел: в то время как вы всегда можете создать свой собственный процесс сборки, но я настоятельно рекомендую использовать угловые-интерфейс командной строки, потому что она имеет все необходимые рабочие процессы и она прекрасно работает сейчас. Мы уже используем его в производстве и Дон'Т есть какие-либо вопросы с углового-CLI и все.
Это поддерживает:
в <предварительно> новый проект-название НГ --маршрутизация </пред>
Вы можете добавить --стиль=СКС
по Sass .поддержка СКС.
Вы можете добавить `--напрашивающееся ng4, использовать угловые 4 вместо угловой 2.
После создания проекта, CLI будет автоматически запускать НПМ установки
для вас. Если вы хотите использовать вместо пряжи, или просто хочется посмотреть на проект каркаса без установки, регистрация как это сделать здесь.
Внутри папки проекта:
в <предварительно> НГ строить -прод </пред>
<удар>В текущей версии вы должны указать `--АОТ вручную, потому что это могут быть использованы при разработке режима (хотя, что's не практичными из-за медлительности).</удара>
Это также выполняет AOT-компиляции для даже меньше (не угловая компилятор, вместо вывода компилятора). Связки гораздо меньше с АОТ, если вы используете угловые 4 как сгенерированный код будет меньше.
Вы можете протестировать приложение с АОТ в режиме развития (sourcemaps, без минификации) и АОТ, запустив НГ построить-АОТ
.
Вывода по умолчанию dir-это ./дист, хотя он может быть изменен в
./угловые-Кинк.формат JSON`.
Результатом этапа построения заключается в следующем:
(Примечание: в <контент-хэш>
относится к хэш / отпечаток содержимое файла, что'ы предназначены для очистки кеша, кстати, это возможно, поскольку Webpack пишет "сценарий" теги по себе)
./дист/активов Файлы скопированы "как есть" с
./в src/активов/**`./dist/index.html
От ./src/index.html после добавления webpack скрипты к нему Файл шаблона источник настраивается в
./угловые-Кинк.формат JSON`./dist/inline.js
Небольшой webpack погрузчик / полифилл./дист/главная.<контент-хэш>.bundle.js
Главная .JS файл, содержащий все .js скрипты созданные / импортированные./Р/стили.<контент-хэш>.bundle.js
При использовании Webpack погрузчики для CSS, которая является командной строкой, они загружаются здесь через JS В старых версиях он также создал сжатые версии для проверки их размеров и `.карты sourcemaps файлов, но это уже не происходит, так как люди продолжали спрашивать, чтобы удалить эти.
В некоторых других случаях, вы можете найти другие нежелательные файлы/папки:
./из-ЦТП/
От ./ГРЦ/tsconfig.формат JSON
'ы outDir
./из-ЦТП-Е2Е/
От ./Е2Е/tsconfig.формат JSON
'ы outDir
./дист/ngfactory/
Из AOT компилятор (не настраивается без разветвления CLI как бета 16)На сегодняшний день я до сих пор найти ближайшие компиляцией кулинарную книгу, как самый лучший рецепт для производства комплектации. Вы можете найти его здесь: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Мой опыт работы с Angular 2 так далеко, что АОТ создает наименьшее строит с практически нет времени загрузки. И самый важный вопрос здесь - вам нужно только отправить несколько файлов к производству.
Это, видимо, потому, что угловые компилятор не будет поставляться с производства строит, как шаблоны компилируются, что "раньше времени" по. Это's также очень здорово увидеть вашу HTML шаблон разметки преобразованы в JavaScript инструкции, которые будет очень трудно декомпилировать в исходный HTML.
Я'ве сделал простое видео, где я демонстрирую размер файла, количество файлов и т. д. для угловой приложения 2 в dev против АОТ сборки которого вы можете увидеть здесь:
Вы'll найти исходный код, использованный в видео здесь:
**Production build with
- Angular Rc5
- Gulp
- typescripts
- systemjs**
1)con-cat all js files and css files include on index.html using "gulp-concat".
- styles.css (all css concat in this files)
- shims.js(all js concat in this files)
2)copy all images and fonts as well as html files with gulp task to "/dist".
3)Bundling -minify angular libraries and app components mentioned in systemjs.config.js file.
Using gulp 'systemjs-builder'
SystemBuilder = require('systemjs-builder'),
gulp.task('system-build', ['tsc'], function () {
var builder = new SystemBuilder();
return builder.loadConfig('systemjs.config.js')
.then(function () {
builder.buildStatic('assets', 'dist/app/app_libs_bundle.js')
})
.then(function () {
del('temp')
})
});
4)Minify bundles using 'gulp-uglify'
jsMinify = require('gulp-uglify'),
gulp.task('minify', function () {
var options = {
mangle: false
};
var js = gulp.src('dist/app/shims.js')
.pipe(jsMinify())
.pipe(gulp.dest('dist/app/'));
var js1 = gulp.src('dist/app/app_libs_bundle.js')
.pipe(jsMinify(options))
.pipe(gulp.dest('dist/app/'));
var css = gulp.src('dist/css/styles.min.css');
return merge(js,js1, css);
});
5) In index.html for production
<html>
<head>
<title>Hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<link rel="stylesheet" href="app/css/styles.min.css" />
<script type="text/javascript" src="app/shims.js"></script>
<base href="/">
</head>
<body>
<my-app>Loading...</my-app>
<script type="text/javascript" src="app/app_libs_bundle.js"></script>
</body>
</html>
6) Now just copy your dist folder to '/www' in wamp server node need to copy node_modules in www.
Вы можете развернуть ваш угловой приложения на GitHub с помощью угловые-Кинк-ghpages
проверьте ссылку, чтобы узнать, как развертывать, используя этот Кинк.
развернутый сайт будет сохранен в какой-то ветке в гитхаб, как правило,
ГХ-страниц
использовать можно клонировать ветку в Git и использовать его как статический сайт на ваш сервер
и"самое лучшее" и зависит от сценария. Бывают времена, когда ты заботишься только о минимально возможный один узелок, но в больших приложений, которые вы, возможно, придется рассмотреть возможность отложенной загрузки. В какой-то момент это становится невыгодно для всего приложения в один пакет.
В последнем случае Webpack-это вообще лучший способ, так как он поддерживает разделение кода.
На один набор, я бы рассматривал свертки, или компилятора, если вы чувствуете себя храбрым :-)
Я создал образцы всех угловых пакетов, я'ве когда-либо использовали здесь: http://www.syntaxsuccess.com/viewarticle/angular-production-builds
Код может быть найден здесь: https://github.com/thelgevold/angular-2-samples
Угловая версия: 4.1.х
Пожалуйста, попробуйте ниже команду CLI в текущем каталоге проекта. Он создаст вокруг связку папок. так что вы можете загрузить все файлы в папке dist для развертывания.
НГ построить-прод --АОТ --база-высоту.
Просто установка угловые 4 с webpack 3 в течение минуты ваши разработки и производства ОКР пакет будет готов без каких-либо проблем просто следуйте ниже на GitHub док