Javascript 异步脚本加载

我正在开发Node.JS应用程序。我的客户端javascript大约是1000 LoC，加上3个库。我缩小了javascript文件并将其连接到一个总大小为150kb（50kb压缩）的文件中

---

我想知道在文件大小的哪一点上考虑使用AMD、require.js或类似软件是合理的。

简短回答： ~100-150kb将是一个非常大的警告信号，但文件大小不是唯一的指标。此外，检查加载是否会阻碍响应和UI加载，以及加载的程度（查看Chrome开发工具中的网络面板）对于做出正确的决策非常重要

长答案： 使用异步加载的原因不在于文件大小，而在于部分代码的使用模式和计时。其思想是在初始加载时加载所需的最小值，因此页面将以尽可能快的速度加载，用户将获得响应最快的体验，然后在后台加载将来所需的资源

一个150kb的文件太多了（例如，你的文件是50kb的gzipped，所以不那么可怕），但是如果js文件加载没有阻止UI呈现，那么文件大小就不是问题。我的意思是，如果用户没有注意到页面加载延迟，那么就没有文件大小问题。此外，如果是这种情况，您可能需要考虑使用AsYNC标记属性。当然，这对于构建在客户端框架（如angular或ExtJs）上的应用程序是无效的，因为js正在呈现UI

问问你自己，你的代码有多少被你的多少用户使用，使用频率有多高，（对自己诚实）。经验法则是，如果任何UI元素稍后出现在应用程序流中，则可以稍后加载它们。但请记住，正如所有拇指法则一样，也有例外，请注意。好的分析数据比任意大小的文件要好，您可以真正看到使用了UI（和代码）的哪些部分以及何时使用。可能有些需要在流程中很晚加载

如果所有的代码都是预先需要的（这种情况很少），那么AMD可能不适合您

如果您的应用程序有，统计图表对话框使用了许多独特的代码，但只有20%的用户单击打开的按钮，该按钮位于“设置”页面，然后在其他页面上加载所有代码和所有其他内容，这是一种浪费，最好在“设置”页面或单击按钮（如果没有设置页面）时这样做（甚至当鼠标位于按钮上方时）

了解使用模式和时间是一个关键标准

这两篇文章非常有趣，可能有助于做出一些部署决策：

此外，如果您仍然希望将所有内容加载到一个文件中，requireJs还提供了值得一看的优化器工具：

---

谢谢你的详细回答。我不使用javascript呈现任何HTML，它只模拟行为。我将我的minified client.js放在页面底部。文件平均加载大约需要50毫秒。不过，我会关注这个主题，谢谢！然后它不会阻塞，你可以将其作为一个整体加载，可能是使用HTML5 asyn这听起来似乎没有太多的理由AMD。