将TypeScript编译为单个js文件的优缺点是什么？

Question

标题问道。什么是将多个.ts文件转换为单个.js文件的优缺点？ 例如这只是表现原因吗？它会让调试变得更难吗？

Answer 1

将您的来源展示为一个文件......

• ...使调试变得更加困难（是的，有源图，但是你必须注意不要在生成版本中包含它们，从而导致更大的构建管道）。但是，如果您使用good transpilers，您可能已经使用过源地图。
• ...导致糟糕的网站/初始渲染性能（特别是对于HTTP / 2，现在已经成为现成的大包。只需使用HTTP / 2和类似jspm的东西）。
• ...阻止您以可接受的方式使用热重新加载插件（即，一旦文件发生更改，自动刷新浏览器的插件）。如果只更改一个源文件，则只编译该文件;没有必要重新构建整个捆绑包。如果你在文件更改时捆绑所有内容，那么大型应用程序将变得非常难以维护。
• ...不会影响您需要放入HTML文件的数量。因此，@ Alex所说的并不完全正确。您的HTML应该只导入一个核心模块;如果你把所有东西捆绑起来并不重要。请查看System.import，WHATWG Loader spec和jspm。另请查看Akamai HTTP/2 demo。

TL; DR：不要创建单个捆绑包。这已成为过去，可能会因为优化HTTP / 2的Web服务器（和浏览器）而死亡。

Answer 2

这完全取决于您的项目设置和环境。

如果您正在利用http / 2及其通过一个通道发送多个文件的能力，那么无论是否连接文件都不会影响页面加载性能。如果您不这样做，则可以通过加载一个大文件而不是多个较小的文件来提高性能。

如果您正在考虑连接文件，则不使用依赖项加载器。这没关系，但这意味着您需要在html页面中引用所有文件。如果您只有一个连接文件可供参考，这很简单，如果您有数百个文件，则更难一点。您可以使用像gulp这样的构建工具来构建您的html并自动包含所有引用，但如果您不这样做，您将会陷入皇家混乱。

关于调试，你可以使用源图，这意味着你可以直接在浏览器中调试你的打字稿，这是一个非常好的主意。就像你可以调试C＃而不是编译的IL一样。如果您使用的是源图，则无论是否连接文件，您的调试体验都是相同的。使用TypeScript进行开发时使用源图。