Phương pháp tốt nhất để gói Angular (phiên bản 2, 4, 6, ...) để sản xuất trên máy chủ web trực tiếp là gì.
Vui lòng bao gồm phiên bản Angular trong câu trả lời để chúng tôi có thể theo dõi tốt hơn khi chuyển sang phiên bản mới hơn.
Phương pháp tốt nhất để gói Angular (phiên bản 2, 4, 6, ...) để sản xuất trên máy chủ web trực tiếp là gì.
Vui lòng bao gồm phiên bản Angular trong câu trả lời để chúng tôi có thể theo dõi tốt hơn khi chuyển sang phiên bản mới hơn.
Câu trả lời:
2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x
(TypeScript) với CLI gócnpm install -g @angular/cli
ng new projectFolder
tạo một ứng dụng mớing build --prod
(chạy trong dòng lệnh khi thư mục là projectFolder
)
prod
gói cờ cho sản xuất (xem tài liệu Angular để biết danh sách tùy chọn đi kèm với cờ sản xuất).
Nén bằng Brotli nén tài nguyên bằng lệnh sau
for i in dist/*; do brotli $i; done
các gói được tạo theo mặc định cho projectFolder / dist (/ $ projectFolder cho 6)
Kích thước với Angular 9.0.0
với CLI 9.0.1
và CSS tùy chọn mà không cần định tuyến Angular
dist/main-[es-version].[hash].js
Ứng dụng của bạn được gói [kích thước ES5: 158 KB cho ứng dụng Angular CLI mới trống, được nén 40 KB ].dist/polyfill-[es-version].[hash].bundle.js
các phụ thuộc polyfill (@angular, RxJS ...) được gói [kích thước ES5: 127 KB cho ứng dụng Angular CLI mới trống, nén 37 KB ].dist/index.html
điểm vào của ứng dụng của bạn.dist/runtime-[es-version].[hash].bundle.js
trình tải webpackdist/style.[hash].bundle.css
định nghĩa phong cáchdist/assets
tài nguyên được sao chép từ cấu hình tài sản CLI gócBạn có thể xem trước ứng dụng của mình bằng ng serve --prod
lệnh khởi động máy chủ HTTP cục bộ sao cho có thể truy cập ứng dụng có tệp sản xuất bằng http: // localhost: 4200 .
Để sử dụng sản xuất, bạn phải triển khai tất cả các tệp từ dist
thư mục trong máy chủ HTTP bạn chọn.
2.0.1 Final
sử dụng Gulp (TypeScript - Target: ES5)npm install
(chạy trong cmd khi direcory là projectFolder)npm run bundle
(chạy trong cmd khi direcory là projectFolder)
các gói được tạo để projectFolder / bundles /
bundles/dependencies.bundle.js
[ kích thước: ~ 1 MB (càng nhỏ càng tốt)]
bundles/app.bundle.js
[ kích thước: phụ thuộc vào dự án của bạn , của tôi là ~ 0,5 MB ]
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
thẻ sau thẻ bó vẫn sẽ cho phép chương trình chạy nhưng gói phụ thuộc sẽ bị bỏ qua và phụ thuộc sẽ được tải từ node_modules
thư mục.<!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>
Điều tốt nhất tôi có thể làm được :)
inline-templates
được chạy, nó sẽ nội tuyến các mẫu sau đó tạo một bản sao của tất cả các thư mục và tệp ứng dụng tại dist/app
. Sau đó, trong dist-systemjs.config.js
bạn ánh xạ app
tới dist/app
mà là một thư mục đó sẽ không tồn tại nếu bạn sử dụng các dist
thư mục root. Bạn có muốn chạy ứng dụng của mình từ dist
thư mục không? Và nếu đó là trường hợp, bạn sẽ không có một dist
thư mục được lồng trong dist
thư mục gốc . Tôi phải thiếu một cái gì đó khác ở đây. Bạn không cần phải nói với systemjs sử dụng các tệp được đóng gói của bạn chứ không phải các tệp thông thường được tìm thấy trong dist/app
thư mục?
Nhóm Angular2 đã xuất bản một hướng dẫn sử dụng Webpack
Tôi đã tạo và đặt các tệp từ hướng dẫn trong một dự án hạt giống GitHub nhỏ . Vì vậy, bạn có thể nhanh chóng thử quy trình làm việc.
Hướng dẫn :
cài đặt npm
npm bắt đầu . Cho sự phát triển. Điều này sẽ tạo một thư mục "dist" ảo sẽ được tải về tại địa chỉ localhost của bạn.
npm chạy xây dựng . Cho việc sản xuất. "Điều này sẽ tạo ra một phiên bản thư mục" dist "vật lý hơn mức có thể được gửi đến máy chủ web. Thư mục dist là 7,8 MB nhưng thực sự chỉ cần 233KB để tải trang trong trình duyệt web.
Bộ công cụ khởi động Webpack này cung cấp một số tính năng thử nghiệm hơn hướng dẫn ở trên và có vẻ khá phổ biến.
Angular.io có hướng dẫn bắt đầu nhanh chóng. Tôi đã sao chép hướng dẫn này và mở rộng với một số tác vụ gulp đơn giản để gói mọi thứ vào thư mục dist có thể được sao chép vào máy chủ và hoạt động như vậy. Tôi đã cố gắng tối ưu hóa mọi thứ để hoạt động tốt trên Jenkis CI, vì vậy node_modules có thể được lưu trữ và không cần phải sao chép.
Mã nguồn với ứng dụng mẫu trên Github: https://github.com/Anjmao/angular2-production-workflow
Các bước để sản xuấtNút : Mặc dù bạn luôn có thể tạo quy trình xây dựng của riêng mình, nhưng tôi khuyên bạn nên sử dụng angular-cli, vì nó có tất cả các quy trình công việc cần thiết và hiện tại nó hoạt động hoàn hảo. Chúng tôi đã sử dụng nó trong sản xuất và không có bất kỳ vấn đề nào với angular-cli cả.
Điều này hỗ trợ:
Tên dự án mới - xuất hiện
Bạn có thể thêm --style=scss
để hỗ trợ SASS .scss.
Bạn có thể thêm --ng4
để sử dụng Angular 4 thay vì Angular 2.
Sau khi tạo dự án, CLI sẽ tự động chạy npm install
cho bạn. Nếu bạn muốn sử dụng Sợi thay thế, hoặc chỉ muốn xem bộ xương dự án mà không cần cài đặt, hãy kiểm tra cách thực hiện tại đây .
Trong thư mục dự án:
ng xây dựng
Ở phiên bản hiện tại, bạn cần chỉ định --aot
thủ công, bởi vì nó có thể được sử dụng trong chế độ phát triển (mặc dù điều đó không thực tế do chậm).
Điều này cũng thực hiện biên dịch AoT cho các gói thậm chí nhỏ hơn (không có trình biên dịch Angular, thay vào đó, đầu ra trình biên dịch được tạo). Các gói nhỏ hơn nhiều với AoT nếu bạn sử dụng Angular 4 vì mã được tạo nhỏ hơn.
Bạn có thể kiểm tra ứng dụng của mình với AoT ở chế độ phát triển (sourcemaps, không thu nhỏ) và AoT bằng cách chạyng build --aot
.
Thư mục đầu ra mặc định là ./dist
, mặc dù nó có thể được thay đổi trong./angular-cli.json
.
Kết quả của bước xây dựng là như sau:
(Lưu ý: <content-hash>
đề cập đến hàm băm / dấu vân tay của nội dung của tệp có nghĩa là một cách làm bộ nhớ cache, điều này có thể xảy ra do Webpack tự viết các script
thẻ)
./dist/assets
./src/assets/**
./dist/index.html
./src/index.html
, sau khi thêm tập lệnh webpack vào ./angular-cli.json
./dist/inline.js
./dist/main.<content-hash>.bundle.js
./dist/styles.<content-hash>.bundle.js
Trong các phiên bản cũ hơn, nó cũng tạo ra các phiên bản được nén để kiểm tra kích thước của chúng và .map
các tệp sourcemaps, nhưng điều này không còn xảy ra khi mọi người cứ yêu cầu xóa chúng.
Trong một số trường hợp khác, bạn có thể tìm thấy các tệp / thư mục không mong muốn khác:
./out-tsc/
./src/tsconfig.json
'soutDir
./out-tsc-e2e/
./e2e/tsconfig.json
'soutDir
./dist/ngfactory/
<content-hash>
khỏi các gói trong prod. nó có thể gây ra vấn đề trong việc nhận gói mới nhất?
Cho đến ngày hôm nay, tôi vẫn thấy cuốn sách dạy nấu ăn tổng hợp thời gian trước là công thức tốt nhất để sản xuất bó. Bạn có thể tìm thấy nó ở đây: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Trải nghiệm của tôi với Angular 2 cho đến nay là AoT tạo ra các bản dựng nhỏ nhất mà hầu như không có thời gian tải. Và quan trọng nhất như câu hỏi ở đây là về - bạn chỉ cần gửi một vài tệp để sản xuất.
Điều này có vẻ là do trình biên dịch Angular sẽ không được cung cấp cùng với các bản dựng sản xuất vì các mẫu được biên dịch "Trước thời gian". Thật tuyệt khi thấy đánh dấu mẫu HTML của bạn được chuyển đổi thành các hướng dẫn javascript, rất khó để chuyển đổi kỹ thuật thành HTML gốc.
Tôi đã tạo một video đơn giản trong đó tôi chứng minh kích thước tải xuống, số lượng tệp, v.v. cho ứng dụng Angular 2 trong bản dựng dev vs AoT - mà bạn có thể xem tại đây:
Bạn sẽ tìm thấy mã nguồn được sử dụng trong video tại đây:
**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.
Bạn có thể triển khai ứng dụng góc của mình github
bằng cách sử dụng
angular-cli-ghpages
kiểm tra liên kết để tìm cách triển khai bằng cli này.
trang web được triển khai sẽ được lưu trữ ở một số chi nhánh tại github
thường
trang gh
sử dụng có thể sao chép nhánh git và sử dụng nó như trang web tĩnh trong máy chủ của bạn
"Tốt nhất" tùy thuộc vào kịch bản. Đôi khi bạn chỉ quan tâm đến gói đơn nhỏ nhất có thể, nhưng trong các ứng dụng lớn, bạn có thể phải cân nhắc tải lười biếng. Tại một số điểm, nó trở nên không thực tế để phục vụ toàn bộ ứng dụng như một gói duy nhất.
Trong trường hợp sau, Webpack thường là cách tốt nhất vì nó hỗ trợ tách mã.
Đối với một gói duy nhất tôi sẽ xem xét Rollup hoặc trình biên dịch đóng nếu bạn cảm thấy dũng cảm :-)
Tôi đã tạo các mẫu của tất cả các gói Angular tôi từng sử dụng ở đây: http://www.syntaxsuccess.com/viewarticle/angular-production-builds
Mã có thể được tìm thấy ở đây: https://github.com/thelgevold/angular-2-samples
Phiên bản góc: 4.1.x
Chỉ cần thiết lập angular 4 với webpack 3 trong vòng một phút, gói ENV phát triển và sản xuất của bạn sẽ sẵn sàng mà không có vấn đề gì, chỉ cần làm theo tài liệu github dưới đây
Vui lòng thử bên dưới lệnh CLI trong thư mục dự án hiện tại. Nó sẽ tạo ra gói thư mục dist. để bạn có thể tải lên tất cả các tệp trong thư mục dist để triển khai.
ng xây dựng --prod --aot --base-href.
ng phục vụ công việc để phục vụ ứng dụng của chúng tôi cho mục đích phát triển. Còn sản xuất thì sao? Nếu chúng ta xem xét tệp pack.json, chúng ta có thể thấy rằng có các tập lệnh chúng ta có thể sử dụng:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Tập lệnh xây dựng sử dụng bản dựng của Angular CLI với cờ --prod. Hãy thử nó ngay bây giờ. Chúng tôi có thể làm điều đó theo một trong hai cách:
# sử dụng tập lệnh npm
npm run build
# sử dụng cli trực tiếp
ng build --prod
Lần này chúng tôi được cung cấp bốn tệp thay vì năm. Cờ --prod báo cho Angular làm cho ứng dụng của chúng ta có kích thước nhỏ hơn nhiều.