带有 SignalR 和 KnockoutJS 的大型项目的 Javascript

Question

我很想知道其他团队如何在他们的项目中使用 Javascript。目前我有一个 MVC .Net 应用程序 - 使用面向服务的体系结构和 Entity Framework .. 等等等等 - 不是我真正想问的，但知道有用。对于客户端，我正在使用带 knockout 的信号器。 Knockout 需要你绑定(bind)一个 View 模型，然后 SignalR 参与进来，它会变得有趣。

为了将其拆分(并获取所有依赖项 Knockout、jQuery 等)，我决定使用 RequireJS 并将其结构化如下:

|- \Js
   |- app.js (This actually creates a connection with signalr)
   |- config.js (requirejs.config - lists all the js libraries and then lists their dependancies)
   | - \App
       |- SomeFunction.js (Initialises the viewmodel and binds to the view)
       |- \ViewModel
          |- SomeViewModel.js (Consists of the view model)
          |- SomeOtherViewModel.ks (You get the idea...)

(我没有列出这些库，但它们列在 Js 文件夹内的 vendor 文件夹中)

我将文件拆分得如此之多的原因是因为 1000 多行 javascript 真的很难阅读，而且它使我的团队更容易处理项目的不同元素。但这确实有一个缺点——当我查看每个请求的流量时，它的 1.5mb 听起来还不错，但随着 javascript 文件的增长，它正成为一个日益严重的问题(特别是当我向应用程序 promise 时会更快!)

我曾尝试使用 vendor 库的缩小版本，但这实际上并没有产生太大影响。有没有人遇到过这个问题，你是如何克服这个问题的？我不确定如何精简 javascript(无需手动执行此操作)并仍然使用 requirejs 来管理依赖项。

谢谢

Answer 1

您可以使用 RequireJS 的 r.js 优化您的代码 optimizer .优化器知道如何优化 RequireJS 模块。它可以配置为保持 vendor 的东西完好无损。查看 r.js 的文档，尝试一下，如果遇到特定问题，请提出更多问题。对于如何使用它，没有放之四海而皆准的答案。

通过使用优化器，您可以显着减少网络请求的数量和传输的数据大小。在我正在开发的一个应用程序中，在我使用优化器之前，在远程服务器场上运行 Selenium 测试时，我遇到了测试超时，这已经足够重要了。优化后超时消失。