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

时间:2013-07-04 03:03:37

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

使用angularJS很棒。虽然我看到一个问题,我有以下文件:

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

与实际的AngularJS库文件一起,也许jQuery是对服务器的http请求。

有没有办法将所有这些组合在一起用于生产环境?更重要的是有一个特定的AngularJS推荐的方法吗?

2 个答案:

答案 0 :(得分:3)

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

  • Uglify(缩小)
  • 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问题,虽然我相信依靠服务器来编译,缓存和检查缓存版本是不可取的。不必要的处理器和系统,以维持生产环境。

答案 1 :(得分:1)

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

如果使用缩小,你唯一需要注意的是依赖注入可以在Angular中破解。因此,这种形式的DI将是首选。

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