AngularJS通過組合javascript文件來減少HTTP請求

Question

使用angularJS很棒。 雖然我看到一個問題，我有以下文件：

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

這與實際的AngularJS庫文件以及jQuery一起分配給服務器的http請求。

有沒有辦法將所有這些組合在一起用於生產環境？ 更重要的是有一個特定的AngularJS推薦的方法嗎？

Answer 1

如上所述，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問題，雖然我相信依靠服務器來編譯，緩存和檢查緩存版本是不可取的。 在生產環境中維護的不必要的處理器和系統。

Answer 2

腳本的組合和縮小主要在服務器上完成。 不同的技術\\工具提供不同的機制來支持此功能。 我不認為這是一個AngularJS問題。

如果使用縮小，唯一需要注意的是依賴注入可以在Angular中中斷。 因此，這種形式的DI將是首選。

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