把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?
请在回答中包含Angular版本,以便我们在它转移到后续版本时更好地跟踪。
把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?
请在回答中包含Angular版本,以便我们在它转移到后续版本时更好地跟踪。
当前回答
直到今天,我仍然认为Ahead-of-Time Compilation烹饪书是产品捆绑的最佳食谱。你可以在这里找到它:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
到目前为止,我使用Angular 2的经验是,AoT创建了最小的构建,几乎没有加载时间。最重要的是,您只需要将几个文件交付到生产环境中。
这似乎是因为Angular编译器不会随产品版本一起发布,因为模板是“提前”编译的。看到你的HTML模板标记转换成javascript指令也很酷,这将很难反向工程到原始HTML。
我做了一个简单的视频,演示了Angular 2应用在开发阶段和AoT构建阶段的下载大小、文件数量等——你可以在这里看到:
https://youtu.be/ZoZDCgQwnmQ
你可以在这里找到视频中使用的源代码:
https://github.com/fintechneo/angular2-templates
其他回答
使用SystemJs生成器和gulp的Angular 2生产工作流
角。IO有快速入门教程。我复制了本教程,并扩展了一些简单的gulp任务,将所有内容捆绑到dist文件夹,可以复制到服务器并像那样工作。我尝试优化所有内容,以便在Jenkis CI上正常工作,因此node_modules可以被缓存,不需要复制。
源代码与示例应用程序在Github: https://github.com/Anjmao/angular2-production-workflow
Steps to production清洁打字文件编译js文件和dist文件夹 在app文件夹内编译typescript文件 使用SystemJs捆绑器将所有内容捆绑到dist文件夹,并生成哈希值,以便浏览器缓存刷新 使用gulp-html-replace将index.html脚本替换为捆绑版本并复制到dist文件夹 复制资产文件夹内的所有内容到dist文件夹
Node:虽然你总是可以创建自己的构建过程,但我强烈建议使用angular-cli,因为它有所有需要的工作流,现在它工作得很完美。我们已经在生产环境中使用它了,在使用angular-cli时没有任何问题。
2到14 (TypeScript)使用Angular CLI
前设置
NPM install -g @angular/cli 创建一个新的应用程序
捆绑销售的步骤
ng build(当目录为projectFolder时在命令行中运行)。 flag prod bundle for production现在是默认的(如果需要,请参阅Angular文档自定义它)。 使用Brotli压缩使用以下命令压缩资源 对于dist/*/*中的I;Do brotli $i;完成
包默认生成到projectFolder/dist(/$projectFolder for v6+)**
输出
Angular 14.0.2的大小和CLI 14.0.2的选项CSS没有Angular路由
dist/main.[hash].js Your application bundled [ size: 118 KB for new Angular CLI application empty, 36 KB compressed]. dist/polyfill-[es-version].[hash].bundle.js the polyfill dependencies (@angular, RxJS...) bundled [ size: 34 KB for new Angular CLI application empty, 11 KB compressed]. dist/index.html entry point of your application. dist/runtime.[hash].bundle.js webpack loader dist/style.[hash].bundle.css the style definitions dist/assets resources copied from the Angular CLI assets configuration
部署
可以使用ng serve——prod命令预览应用程序,该命令启动本地HTTP服务器,这样就可以使用http://localhost:4200访问带有生产文件的应用程序。这在生产中使用并不安全。
对于生产应用,必须从所选择的HTTP服务器中的dist文件夹中部署所有文件。
**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.
Ng构建——配置生产 (角度14以上)
请在当前项目目录下尝试以下CLI命令。它将创建dist文件夹bundle。因此,您可以上传dist文件夹中的所有文件进行部署。
Ng build——prod——aot——base-href。