Sails.js：在特定视图上加载脚本答案

【问题标题】：Sails.js: load script on a specific viewSails.js：在特定视图上加载脚本
【发布时间】：2016-07-27 10:22:37
【问题描述】：

在 Sails.js 中，我如何在特定视图中加载 javascript 文件，因为我有一个脚本，我只想在一个视图中加载 (.ejs)。

我看到在 layout.ejs 中为所有视图加载了所有 javascript 文件，因此想法是将 javascript 文件从布局中排除并加载到视图中。

  <!--SCRIPTS-->
  <script src="/js/dependencies/sails.io.js"></script>
  <script src="/js/dependencies/angular.js"></script>
  <script src="/js/dependencies/angular-ui-router.js"></script>
  <script src="/js/dependencies/angular-route.js"></script>
  <script src="/js/dependencies/angular-translate.js"></script>
  <script src="/js/dependencies/ui-bootstrap.js"></script>
  <script src="/js/dependencies/textAngular-rangy.min.js"></script>
  <script src="/js/dependencies/textAngular-sanitize.min.js"></script>
  <script src="/js/dependencies/textAngular.min.js"></script>
  <script src="/js/dependencies/angular-color-picker.js"></script>
  <script src="/js/dependencies/angular-click-outside.js"></script>
  <script src="/js/dependencies/angular-bootstrap-tpls.min.js"></script>
  <script src="/js/dependencies/angular-filemanager.js"></script>
  <script src="/js/dependencies/resource.js"></script>
  <script src="/js/app.js"></script>
  <script src="/js/locales/ca.js"></script>
  <script src="/js/locales/en.js"></script>
  <script src="/js/locales/es.js"></script>
  <script src="/js/controllers/IndexController.js"></script>
  <script src="/js/controllers/LoginController.js"></script>
  <script src="/js/controllers/LogoutController.js"></script>
  <script src="/js/controllers/NewVideoController.js"></script>
  <script src="/js/controllers/PreviewController.js"></script>
  <script src="/js/controllers/VideoConfigController.js"></script>
  <script src="/js/controllers/layoutController.js"></script>
  <script src="/js/services/LoginService.js"></script>
  <script src="/js/services/VideoConfigService.js"></script>
  <script src="/js/services/VideoService.js"></script>
  <script src="/js/services/authInterceptor.js"></script>
  <script src="/js/services/authToken.js"></script>
  <script src="/js/test/controllers/IndexController-spec.js"></script>
  <!--SCRIPTS END-->

上面的代码是布局的脚本。我想从布局中删除 textAngular 脚本并仅在使用 textAngular 的视图中加载。

有人有想法吗？

【问题讨论】：

不确定这是否是答案.. 但你不能从 layout.ejs 中删除 textAngular 脚本，并且只将它们作为标签添加到需要它们的 .ejs 文件中吗？
这个脚本链接是自动生成的

标签： javascript node.js sails.js

【解决方案1】：

如果您在不同的页面上加载不同的脚本作为应用程序实际行为的一部分，我建议您不要这样做。（但看起来您使用的是 Angular，所以可能并非如此，因为您可能通过 ng-controller 将 UI 控制器附加到特定页面）。

因此，另一方面，假设您出于性能原因考虑这样做，那么我的建议如下：

首先使用--prod 提升并检查每个页面加载的感觉。现在您使用的是缩小的捆绑包，它应该会快得多。请特别注意后续页面加载的感觉，因为届时您的浏览器将缓存所有内容。由于浏览器（和 HTTP v1）的工作方式，在大多数情况下，您会发现在生产中使用单个包实际上比仅包含在特定页面上使用的那些脚本更快。（此外，如果出现这种情况，它会使切换到 CDN 变得更加容易）。

也就是说，如果您使用 tons 的 JavaScript 文件（兆字节和兆字节），这可能并不总是一种选择。在那种情况下，我们通常在我的公司做的是 @KevinLe 建议的：在需要它们的页面上手动包含非常繁重的脚本。（即便如此，您可能仍然可以将链接器用于其他任何事情——反之亦然）。

另外，您也可以使用 Grunt 或 Gulp——请记住，当您开始生产并考虑使用 CDN 时，您必须将每个单独视图的这些脚本捆绑到单独的有效负载中。

回顾一下：

避免编写在加载时立即执行操作而不首先检查 DOM 的前端代码
对于大多数应用，您应该只使用一个捆绑包（性能会更好）
如果您需要将内容分开，请在需要它们的视图中手动包含脚本（请注意，如果您这样做并且还决定继续使用链接器，那么您可能希望将链接器标签移出layout.ejs 以及每个单独的视图 - 将您的脚本标签保存在代码中的一个位置）

【讨论】：