把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?
请在回答中包含Angular版本,以便我们在它转移到后续版本时更好地跟踪。
把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?
请在回答中包含Angular版本,以便我们在它转移到后续版本时更好地跟踪。
当前回答
Ng构建——配置生产 (角度14以上)
其他回答
带Webpack的Angular 2(不需要CLI设置)
1- Angular2团队的教程
Angular2团队发布了一个使用Webpack的教程
我将教程中的文件创建并放置在一个小型GitHub种子项目中。因此,您可以快速地尝试工作流。
产品说明:
npm安装 npm的开始。为发展。这将创建一个虚拟“dist”文件夹,该文件夹将被重载到您的本地主机地址。 NPM运行构建。用于生产。这将创建一个可以发送到web服务器的物理“dist”文件夹版本。dist文件夹有7.8MB,但实际上只需要234KB就可以在web浏览器中加载页面。
2 - Webkit入门套件
这个Webpack入门套件比上面的教程提供了更多的测试功能,看起来很受欢迎。
请在终端中使用以下命令
ng build --configuration production --aot
Ng服务的工作是为我们的应用程序的开发目的服务。生产方面呢?如果我们看看我们的包装。Json文件,我们可以看到有我们可以使用的脚本:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
构建脚本使用Angular CLI的ng build,并带有——prod标志。我们现在试试。我们有两种方法:
#使用NPM脚本
npm run build
#直接使用cli
ng build --prod
这次我们得到了四个文件而不是五个。——prod标志告诉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
**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.