如何在一个js文件中组装angularjs项目

时间:2013-07-15 02:36:29

标签: javascript angularjs compression minify

我有一个巨大的angularjs应用程序,包含许多 .js 文件。

据我所知,浏览器应该打开一个新的连接来访问每个文件。文件大小与性能无关,但打开新连接可以。

这就是为什么我正在寻找一些js-assembler来制作单个 .js 文件。

我不确定在角度应用的情况下我应该这样做吗?任何人都可以建议我选择哪个js汇编程序?

3 个答案:

答案 0 :(得分:4)

看一下grunt:http://www.gruntjs.com/

这是一个可以自动化这类过程的工具,比如在合并它们之前缩小文件,这对于javascript应用程序开发非常有用。

答案 1 :(得分:4)

我认为你真正需要的是一个工具连接和缩小或压缩JavaScript和CSS资源。就像Rails世界中的asset-pipeline一样。

正如你所提到的,你有两个项目,一个是后端是Nodejs,另一个是Java,所以我将把这个问题解决到这两个方面:

  1. Nodejs side

    就像Antoine说的那样,你可以使用像gruntjs(http://www.gruntjs.com/)这样的构建工具编写一个简单的任务来连接所有的js文件。或者您可以使用connect-assets等工具从后端提供连接文件(如果您使用连接网络框架),更多详情请参阅此问题:Concat and minify JS files in Node

  2. Java方

    wro4j非常方便,几乎可以提供处理Java项目资产所需的一切。您可以在他们的github页面中查看详细信息用法。除此之外,Google Closure Compiler也是一个不错的选择。

  3. 你可以使用你喜欢的任何工具连接/缩小/ uglify 多个javascript文件,但有些工具可能提供简单的集成或其他功能(如服务器端的动态服务器)。因此,请查看每个工具并确定您要使用哪个工具。

    总而言之,Angularjs的资产管理与任何其他Javascript framworks /文件没有区别,除了模板异步加载。(如果您在单独的文件中编写模板,请确保前端可以直接访问该模板文件,并且跳过模板文件的连接过程。)

    希望它有所帮助,谢谢。

答案 2 :(得分:2)

使用ngmin + Closure Compiler

取自:http://briantford.com/blog/huuuuuge-angular-apps

...构建流程

不可否认,这是Angular需要做的一件事,而我2013年的一个重要目标就是在这方面提供帮助。我发布了ngmin,我希望这个工具最终能解决最小化AngularJS应用程序的问题。

目前,我认为最好的办法是首先将您的JavaScript文件与app.js连接起来,然后使用ngmin来注释DI函数,最后使用标志--compilation_level SIMPLE_OPTIMIZATIONS将Closure Compiler缩小。您可以在angular.js的构建过程中看到这样的示例。

我不建议将RequireJS与AngularJS一起使用。虽然这当然是可能的,但我还没有看到任何需要在实践中有益的实例。

其他链接: