如何将Angular应用捆绑到生产环境中

使用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时没有任何问题。

2016-09-18 18:59:20

使用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时没有任何问题。

2016-09-18 18:59:20

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文件夹中部署所有文件。

2016-08-04 11:18:47

        **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.

2017-01-10 08:42:32

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把我们的应用缩小很多。

2019-12-31 06:13:11

“最佳”取决于场景。有时你只关心最小的单个包，但在大型应用程序中，你可能不得不考虑延迟加载。在某种程度上，将整个应用程序作为一个单一的bundle提供是不切实际的。

在后一种情况下，Webpack通常是最好的方法，因为它支持代码分割。

对于单个包，我会考虑Rollup，或者Closure编译器，如果你有勇气的话:-)

我已经在这里创建了我使用过的所有Angular捆绑器的示例:http://www.syntaxsuccess.com/viewarticle/angular-production-builds

代码可以在这里找到:https://github.com/thelgevold/angular-2-samples

Angular版本:4.1.x

2017-05-23 01:53:24

如何将Angular应用捆绑到生产环境中

推荐文章

最新文章

标签