Який найкращий метод поєднати Angular (версії 2, 4, 6, ...) для виробництва на живому веб-сервері.
Будь ласка, включіть у відповідь Angular версію, щоб ми могли краще відслідковувати, коли вона переходить до пізніших версій.
Який найкращий метод поєднати Angular (версії 2, 4, 6, ...) для виробництва на живому веб-сервері.
Будь ласка, включіть у відповідь Angular версію, щоб ми могли краще відслідковувати, коли вона переходить до пізніших версій.
Відповіді:
2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x
(TypeScript) з кутовим CLInpm install -g @angular/cli
ng new projectFolder
створює нову програмуng build --prod
(запустити в командному рядку, коли каталог projectFolder
)
prod
комплект прапора для виробництва (див. кутову документацію для списку опцій, що входять до виробничого прапора).
Стиснення за допомогою Brotli стискає ресурси за допомогою наступної команди
for i in dist/*; do brotli $i; done
пучки генеруються за замовчуванням для projectFolder / dist (/ $ projectFolder for 6)
Розміри з кутовим 9.0.0
з CLI 9.0.1
та опцією CSS без кутової маршрутизації
dist/main-[es-version].[hash].js
Додаток у комплекті [розмір ES5: 158 Кб для нової програми Angular CLI порожній, стиснуто 40 КБ ].dist/polyfill-[es-version].[hash].bundle.js
залежність полізаповнення (@angular, RxJS ...) в комплекті [розмір ES5: 127 Кб для нового додатка Angular CLI порожній, стиснуто 37 КБ ].dist/index.html
точка входу вашої заявки.dist/runtime-[es-version].[hash].bundle.js
webpack loaderdist/style.[hash].bundle.css
визначення стилівdist/assets
ресурси, скопійовані з конфігурації активів Angular CLIВи можете отримати попередній перегляд програми за допомогою ng serve --prod
команди, яка запускає локальний сервер HTTP, таким чином, що програма із виробничими файлами доступна за допомогою http: // localhost: 4200 .
Для виробничого використання вам потрібно розгорнути всі файли з dist
папки на обраному вами сервері HTTP.
2.0.1 Final
за допомогою Gulp (TypeScript - Ціль: ES5)npm install
(запустити в cmd, коли direcory є projectFolder)npm run bundle
(запустити в cmd, коли direcory є projectFolder)
пучки генеруються до projectFolder / bundles /
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>
Найкраще, що я міг зробити :)
inline-templates
запуску він вкладає шаблони, а потім створює копію всіх папок та файлів програми на dist/app
. Тоді в dist-systemjs.config.js
зіставленні app
з dist/app
якої знаходиться папка , в якій не буде існувати , якщо ви використовуєте dist
папку в кореневому каталозі. Не хочете запускати додаток із dist
папки? І якщо це так, у вас не було б dist
вкладеної папки в кореневу dist
папку. Я, мабуть, тут пропускаю щось інше. Чи не потрібно казати systemjs використовувати файли, що входять у комплект, а не звичайні файли, що знаходяться в dist/app
папці?
Команда Angular2 опублікувала а навчальний посібник із використання Webpack
Я створив і розмістив файли з підручника невеликим насіннєвому проекті GitHub . Таким чином, ви можете швидко спробувати робочий процес.
Інструкції :
npm встановити
npm старт . Для розвитку. Це створить віртуальну папку "dist", яка буде завантажена в реальному часі за адресою localhost.
npm run build . Для виробництва. "Це створить фізичну версію папки" dist ", ніж її можна надіслати веб-серверу. Папка dist становить 7,8 МБ, але для завантаження сторінки у веб-браузер фактично потрібно лише 234 КБ.
Цей веб- пакет Starter Kit пропонує ще кілька функцій тестування, ніж вищевказаний підручник і здається досить популярним.
У Angular.io є підручник із швидкого запуску. Я скопіював цей підручник і доповнив декілька простих завдань із gulp, щоб зв'язати все, щоб розібрати папку, яку можна скопіювати на сервер і працювати просто так. Я намагався оптимізувати все, щоб добре працювати на Jenkis CI, тому node_modules можна кешувати і не потрібно копіювати.
Вихідний код із зразком програми в Github: https://github.com/Anjmao/angular2-production-workflow
Кроки до виробництваВузол : Хоча ви завжди можете створити власний процес збирання, але я настійно рекомендую використовувати кутові клітинки, оскільки у нього є всі необхідні робочі процеси, і він ідеально працює зараз. Ми вже використовуємо його у виробництві і взагалі не має проблем із кутовими кліпами.
Це підтримує:
нове ім'я проекту - маршрутизація
Ви можете додати --style=scss
підтримку SASS .scss.
Ви можете додати --ng4
для використання Angular 4 замість Angular 2.
Після створення проекту CLI автоматично запуститься npm install
для вас. Якщо ви хочете використати Пряжу замість цього або просто хочете подивитися скелет проекту без встановлення, перевірте, як це зробити тут .
Всередині папки проекту:
ng build -prod
У поточній версії потрібно вказати --aot
вручну, оскільки її можна використовувати в режимі розробки (хоча це не практично через повільність).
Це також виконує компіляцію AoT для ще менших пакетів (натомість немає кутового компілятора, згенерованого результатом компілятора). Пакети значно менші, ніж AoT, якщо ви використовуєте Angular 4, оскільки генерований код менший.
Ви можете протестувати свою програму за допомогою AoT в режимі розробки (вихідні карти, відсутність мінімізації) та AoT, запустившиng build --aot
.
Вихідний dir за замовчуванням є ./dist
, хоча його можна змінити ./angular-cli.json
.
Результат кроку збірки такий:
(Примітка: <content-hash>
посилається на хеш / відбиток вмісту файлу, який повинен бути способом перетворення кешу, це можливо, оскільки Webpack пише script
теги самостійно)
./dist/assets
./src/assets/**
./dist/index.html
./src/index.html
, після додавання WebPack сценаріїв до нього ./angular-cli.json
./dist/inline.js
./dist/main.<content-hash>.bundle.js
./dist/styles.<content-hash>.bundle.js
У старих версіях він також створював gzipped версії для перевірки їх розміру та .map
файлів вихідних карт, але цього більше не відбувається, оскільки люди продовжували просити їх видалити.
У деяких інших випадках ви можете знайти інші непотрібні файли / папки:
./out-tsc/
./src/tsconfig.json
'яoutDir
./out-tsc-e2e/
./e2e/tsconfig.json
'яoutDir
./dist/ngfactory/
<content-hash>
з пачок у продажі. це може спричинити проблеми з отриманням останнього пакета?
На сьогоднішній день я все ще вважаю, що найкраща рецептура виробничого пакету - «Попередня компіляційна книга». Ви можете знайти його тут: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Мій досвід роботи з Angular 2 поки що полягає в тому, що AoT створює найменші склади майже без часу завантаження. І найголовніше, що стосується питання - вам потрібно лише доставити кілька файлів до виробництва.
Це, мабуть, тому, що кутовий компілятор не буде поставлений із складаннями виробництва, оскільки шаблони складаються "Попереду часу". Також дуже здорово бачити, як розмітка вашого шаблону HTML трансформується в інструкції javascript, які дуже важко повернути інженеру в оригінальний HTML.
Я створив просте відео, де демонструю розмір завантаження, кількість файлів тощо для програми Angular 2 у програмі Dev vs AoT - яку ви можете побачити тут:
Тут ви знайдете вихідний код, який використовується у відео:
**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="https://stackoverflow.com/">
</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
використовуючи
кутові клітинки
перегляньте посилання, щоб дізнатися, як розгорнути цей кліп.
розгорнутий веб-сайт github
зазвичай зберігатиметься в якійсь галузі
gh-сторінки
використання може клонувати гілку git і використовувати її як статичний веб-сайт на вашому сервері
"Кращий" залежить від сценарію. Бувають випадки, коли ви дбаєте лише про найменший можливий одиночний пакет, але у великих програмах вам, можливо, доведеться враховувати ледачу завантаження. У якийсь момент стає недоцільним обслуговувати весь додаток як єдиний пакет.
В останньому випадку Webpack, як правило, найкращий спосіб, оскільки він підтримує розбиття коду.
Якщо ви хочете почути себе хоробрим, для одного пакету я б розглядав сукупність або компілятор закриття :-)
Я створив зразки всіх кутових пакетів, які я тут коли-небудь використовував: http://www.syntaxsuccess.com/viewarticle/angular-production-builds
Код можна знайти тут: https://github.com/thelgevold/angular-2-samples
Кутова версія: 4.1.x
Просто налаштуйте кутовий 4 з веб-пакетом 3 протягом хвилини, коли ваш комплект розробки та виробництва ENV буде готовий без жодних проблем, просто дотримуйтесь наведеного нижче документа github
Спробуйте нижче команду CLI у поточному каталозі проекту. Це створить розшарування папок dist. тож ви можете завантажувати всі файли в папку dist для розгортання.
ng build --prod --aot - base-href.
ng виконувати роботи для обслуговування нашої програми для цілей розвитку. А як щодо виробництва? Якщо ми подивимось на наш файл package.json, то зможемо побачити, що є сценарії, які ми можемо використовувати:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Сценарій збірки використовує збірку ng Angular CLI з прапором --prod. Спробуємо це зараз. Ми можемо зробити це одним із двох способів:
# за допомогою сценаріїв npm
npm run build
# використання кліпу безпосередньо
ng build --prod
Цього разу нам надано чотири файли замість п'яти. Прапор --prod повідомляє Angular зробити наш додаток значно меншим за розміром.