AngularJS 通过组合 javascript 文件来减少 HTTP 请求答案

【问题标题】：AngularJS reducing HTTP request by combining javascript filesAngularJS 通过组合 javascript 文件来减少 HTTP 请求
【发布时间】：2013-07-04 03:03:36
【问题描述】：

使用 angularJS 很棒。虽然我发现问题在于我有以下文件：

app.js
controllers.js
filters.js
directives.js
services.js

连同实际的 AngularJS 库文件和可能 jQuery 一起分配给服务器的 http 请求。

有没有办法将所有这些组合在一起用于生产环境？更重要的是，是否有特定的 AngularJS 推荐方法来做到这一点？

【问题讨论】：

你在服务器端使用什么？

标签： javascript http angularjs gruntjs bundling-and-minification

【解决方案1】：

如上所述，Grunt.js 项目能够执行任务命令，例如缩小和连接。对这些任务支持最广泛的两个 grunt.js 插件是：

丑化（缩小）
Concat（文件连接）

下面是一个示例任务脚本：

module.exports = function(grunt) {

  grunt.initConfig({
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['assets/**/*.js'],
        dest: 'assets/js/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'assets/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('default', ['concat', 'uglify']);

};

我通常不回答我的 onw 问题，尽管我相信依靠服务器来编译、缓存和检查缓存版本不是要走的路。在生产环境中维护不必要的处理器和系统。

【讨论】：

【解决方案2】：

脚本的合并和缩小主要在服务器上完成。不同的技术\工具提供了不同的机制来支持这个特性。我不认为这是 AngularJS 的问题。

如果使用缩小，你唯一需要注意的是依赖注入可能会在 Angular 中中断。所以这种形式的 DI 会更受欢迎。

app.controller('myController',['dependency1',
    function(dependency1) {
    }
]);

【讨论】：

是的，我知道这超出了 AngularJS 的范围。尽管我正在寻找有关如何执行此任务的建议。我想远离服务器端资产编译/缩小，而更多地转向生产编译/缩小。
服务器端编译和生产编译有什么区别？
如果您认为服务器必须处理文件以生成缩小版本，那么情况并非如此。服务器上的缩小只发生一次（使用一些工具），并且不是每次请求都完成。所以实际的服务器处理不受影响。
是的。但是为了减少我必须维护的系统很简单，我希望有一个在将更改拉入生产分支之前执行的构建脚本。我知道有一些方法可以设置带有缓存的自动构建。从那以后我发现了 grunt.js