多个脚本标签和连接+缩小+预处理答案

【问题标题】：multiple script tags and concatenation + minification + preprocessing多个脚本标签和连接+缩小+预处理
【发布时间】：2012-06-07 20:31:27
【问题描述】：

我有一个带有多个脚本标签（接近 20 个）的 html 文件。我决定将所有 JS 文件连接成一个，然后缩小连接的文件。我正在使用 ant 任务进行连接，并且也将这样做以进行缩小。我知道我需要提供非连接/非缩小版本的选项以进行调试（也称为开发环境）。

我想知道如何实现这一点。例如：文件 main.html 有 20 个脚本标签，我想这样做的一种方法是使用 HTML 预处理器并有条件地包含脚本标签：

#ifdef perf
    <script src="main.min.js"></script> 
#else 
    <script src="ctrl.js"></script>
    <script src="services.js"></script>
    <script src="directives.js"></script>
    <script src="model.js"></script>
    .
    .
    .P.S
    <script src="file_no_20.js"></script>
#endif

main.min.js 是使用 ant 构建过程中连接和缩小的文件。

有没有更好的方法来做到这一点？这种方法有什么缺点？

谢谢，克里斯。 P.S：考虑使用 http://fmpp.sourceforge.net/ 进行 html 预处理，任何其他建议表示赞赏。

【问题讨论】：

标签： javascript performance minify

【解决方案1】：

Chrome 支持一个很棒的功能，称为“源映射”，非常适合此功能。我建议您阅读此处的指南以获取更多信息：

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

如果您使用 AngularJS 进行缩小，有一些注意事项。来自文档：

由于 Angular 从参数名称推断控制器的依赖关系到控制器的构造函数，如果你要缩小 PhoneListCtrl 控制器的 JavaScript 代码，它的所有函数参数也会被缩小，并且依赖注入器不会被能够正确识别服务。

要克服由缩小引起的问题，只需将带有服务标识符字符串的数组分配到控制器函数的 $inject 属性中，就像 sn-p 中的最后一行（已注释掉）建议的那样：
PhoneListCtrl.$inject = ['$scope', '$http'];
还有另一种方法可以指定此依赖项列表并避免缩小问题 - 使用括号表示法将要注入的函数包装到字符串数组中（表示依赖项名称），然后是要注入的函数：
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
这两种方法都适用于 Angular 可以注入的任何函数，因此由项目的样式指南决定使用哪一种。

http://docs.angularjs.org/tutorial/step_05

【讨论】：

谢谢，我去看看。是的，我知道 Angular DI 是如何工作的。我们一直强调使用显式 .$inject 机制。
我读过它，真的很喜欢这个主意。似乎与我在这里提出的问题非常相关。现在与 Angularjs + Closure 编译器争吵，很快就会尝试一下。再次感谢。
没问题。祝你好运！

【解决方案2】：

我建议使用标签库，比如http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/JSPTags4.html#67771 来实现这一点。包括你的脚本：

<script:include src="myscript1.js" />
<script:include src="myscript2.js" />
<script:include src="myscript3.js" />
..

并为您的系统使用页面参数来决定是否必须连接和缩小脚本。如下所示：

www.yourapp.com/app?debugMode=true

默认情况下，脚本被连接和缩小。如果您是从事该项目的开发人员，只需添加一个页面参数，例如 debugMode=true。当 debugMode 为 true 时，只需按原样渲染脚本即可。

市场上有许多服务，例如 http://developer.yahoo.com/yui/compressor/，可以与您的项目集成来为您完成这项工作。

不要在每次加载页面时压缩脚本。第一次做并缓存它，这样你就不必每次都做。在任何时候重建最新的脚本文件，只需添加另一个参数，如 ?rebuild=true 以便所有最新的文件都被压缩和缓存。你也可以对 CSS 做同样的事情。

【讨论】：