Question

我有一个不断增长的角度应用，我的index.html看起来像这样：

<script type="text/javascript" src="public/js/libs/bower/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/spin.js/spin.js"></script>
<script type="text/javascript" src="public/js/libs/overlay.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular/angular.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="public/js/libs/jquery-shake.js"></script>
<script type="text/javascript" src="public/js/libs/bower/pwstrength-bootstrap/dist/pwstrength-bootstrap-1.2.0.min.js"></script>
<script type="text/javascript" src="public/js/app.js"></script>
<script type="text/javascript" src="public/js/controllers/import.js"></script>
<script type="text/javascript" src="public/js/controllers/login.js"></script>
<script type="text/javascript" src="public/js/controllers/main_page.js"></script>
<script type="text/javascript" src="public/js/controllers/manage_users.js"></script>
<script type="text/javascript" src="public/js/controllers/new_user.js"></script>
<script type="text/javascript" src="public/js/auth.js"></script>
<script type="text/javascript" src="public/js/services/httpAuthInterceptor.js"></script>
<script type="text/javascript" src="public/js/services/spinnerHttpInterceptor.js"></script>
<script type="text/javascript" src="public/js/router.js"></script>
<script type="text/javascript" src="public/js/utils.js"></script>

我不希望我的index.html变得一团糟而且Require.JS不是一个选项，因为它必须与angularAMD一起使用，这与angular route resolve不相容 - 这是我应用程序的必备部分。

如何清理我的JS负载？我听说过Grunt，它对我有什么帮助？这只是一个任务跑者...

Answer 1

Grunt可以通过它的插件提供很多帮助。特别是，请查看插件usemin，它允许您在html周围添加注释，以确定您希望如何打包文件。然后，当您运行相关的grunt任务时，它将从您的html中提取<script>标签，连接并缩小与其关联的文件，并将其替换为指向连接和放大器的单个<script>标签;缩小结果。很漂亮。

Answer 2

我的建议不是缩小角度js部分，这不是最佳做法。尝试这个grunt插件，它的角度构建器，它会照顾你的依赖和其他东西，只需阅读描述。

https://www.npmjs.org/package/grunt-angular-builder

此外，您可以使用html2js将模板加载到$ templateCache中，这样每次您需要其他模板时，您的应用都不会进入服务器。

https://www.npmjs.org/package/grunt-html2js

如果您尝试使用RequireJs或Browserify JS，它可以在某些情况下提供帮助，但它不会照顾您的依赖项和项目结构。如果你的应用使用requireJS和Browserify，你也会遇到编写单元测试的麻烦。所以我的建议是不要将这两个模块与Angular一起使用。

angular.js多个js文件

2 个答案: