我们使用带有require Foo = ('./Foo')
的外部模块启动了我们的TS项目,虽然它的组织非常有用,但它需要您使用requirejs(AMD模块)或类似的。虽然这不是我在进行性能分析时注意到的一个问题,但最终我们的页面会产生大量的JS文件请求。我们有一个相当复杂的应用程序,有很多较小的js文件,最终我们对各种文件发出大约160个请求。这显然有很大的开销,移动客户端不能很好地处理大量请求。我正在研究如何摆脱这种模式并使用TypeScripts -out参数生成一个文件。我很好奇是否有人做过类似的跳跃并且有任何关于做出这种改变的建议。
答案 0 :(得分:5)
使用外部模块是正确的。切换到内部模块以减少网络请求是错误的,并且在编写面向未来的模块化代码时违背了最佳实践。要减少为生产应用程序加载的文件数,您只需在构建过程中添加AMD优化器。如果您使用RequireJS作为加载程序,那么最简单的前进路径是use r.js,以便将AMD模块优化为图层。
答案 1 :(得分:2)
您当然可以将所有来源发布到一个脚本中。 TypeScript本身的源代码分为多个输入源文件,这些文件都发送到一个输出文件中。它们都扩展了相同的顶级模块(“TypeScript”),因为模块是开放式的,您可以继续添加它们。
AMD等模块系统为您提供的一个关键是依赖关系管理,因此您可以确保在需要使用它们之前加载和初始化您所依赖的模块(暂时忽略循环依赖关系)。如果您只是在没有模块系统的情况下从上到下将代码放到一个输出脚本中,那么您需要确保在加载时运行的任何代码的顺序都是正确的。
所以你的选择似乎是转向使用内部模块和--out参数来获得一个不依赖于模块加载器(如AMD或NodeJS)的大型脚本,并确保没有订购问题作为加载时间,或者作为C. Snover暗示,使用RequireJS优化器将所有AMD模块合并为一个脚本。如果您已将代码编写为RequireJS模块,则第二种可能更容易。
答案 2 :(得分:2)
什么对我们没用
当我们开发一个最终必须生成一个js文件的中型项目时,我们使用了AMD / requirejs方法。该项目由13个ts
模块组成,每个模块都在一个单独的文件中。使用import
导入依赖关系,模块为export
。我们从ts文件(tsc --module amd)生成了单独的js文件,因此我们能够对各个模块进行单元测试。使用requirejs和grunt完成部署,将13个文件连接成一个文件,剥离defines
并添加和标题(包含UMD)和页脚文件。这种方法也遵循jQuery。但是,我们遇到了这个问题,因为我们没有将所有单个模块附加到的全局对象。因此,一个模块中的代码不知道其他模块。
我们可以通过引入一个全局对象并将所有模块附加到它来解决这个问题。
我们做了什么
然而,我们尝试了另一种方法。 Typescript的tsc编译器选项--out
不仅将所有ts文件连接成一个js文件,而且还考虑了所有依赖关系(如您所料)。所以不再需要requirejs了。使用
/// <reference path="jquery.d.ts"/>
使用grunt-contrib-concat然后我们会添加一个UMD标题并附加一个结束的页脚。
我确定有更多解决方案,但这个解决方案对我们有用。