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

【问题标题】：How to assemble angularjs project in one js file如何在一个js文件中组装angularjs项目
【发布时间】：2013-07-15 02:36:29
【问题描述】：

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

据我所知，浏览器应该打开一个新连接来访问每个文件。文件大小对性能没有影响，但打开新连接会。

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

我不确定是否应该在 Angular 应用程序的情况下执行此操作？谁能建议我应该选择哪个 js 汇编器？

【问题讨论】：

您使用的是什么后端技术栈？
您选择的内容与 Angular 没有任何关系。选择一个适合您的部署策略的解决方案。
其实我有两个有角度的项目。第一个 - REST，基于 java 后端（spring），第二个 - 基于 nodejs 的 REST
见stackoverflow.com/questions/360818/…

标签： javascript angularjs compression minify

【解决方案1】：

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

正如你所说，你有两个项目，一个是Nodejs，另一个是Java，所以我将这个问题分为这两个方面：

Nodejs 端

就像 Antoine 说的，你可以使用一些构建工具，比如 gruntjs(http://www.gruntjs.com/) 来编写一个简单的任务来连接你所有的 js 文件。或者您可以使用connect-assets 等工具从后端提供连接文件（如果您碰巧使用连接网络框架），更多详细信息请参考此问题：Concat and minify JS files in Node。
Java端

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

您可以使用任何您喜欢的工具来连接/缩小/丑化多个 javascript 文件，但有些工具可能会提供简单的集成或其他功能（例如服务器端动态的服务器）。因此，请检查每个工具并决定要使用哪一个。

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

希望对你有帮助，谢谢。

【讨论】：

【解决方案2】：

看看咕噜：http://www.gruntjs.com/

这是一个可以自动化此类过程的工具，除其他外（例如在合并文件之前缩小文件）对于 javascript 应用程序开发非常有用。

【讨论】：

Grunt 看起来很可爱，但它只适用于 nodejs，对吗？
您需要安装它，因为它使用 npm（这是一个数据包管理器，一种更简单的安装模块的方法）来管理它的 javascript 模块。但是您绝对可以将它用于任何 javascript 项目，无论是客户端还是服务器端。

【解决方案3】：

使用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 一起使用。虽然这肯定是可能的，但我还没有看到任何 RequireJS 在实践中有益的例子。

其他链接：

【讨论】：