Question

我有一个包含多个脚本标签的html文件（接近20个）。我决定将所有JS文件连接成一个，然后缩小连接文件。我正在使用ant任务进行连接，并且也将使用ant进行缩小。我知道我需要为调试目的提供非连接/非缩小版本的选项（也就是在dev env中）。

我想知道如何实现这一目标。例如：文件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预处理，我们非常感谢任何其他建议。

Answer 1

Chrome支持一种称为“源映射”的强大功能，非常适合这种情况。我建议你阅读这里的指南了解更多信息：

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

如果你在缩小方面使用AngularJS，有一些警告。来自文档：

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

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

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

Answer 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" />
..

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

www.yourapp.com/app?debugMode=true

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

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

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

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

2 个答案: