asynchronous脚本加载

我正在开发一个Node.JS应用程序。 我的客户端JavaScript约为1.000 LoC,再加上3个库。 我将我的javascript文件缩小并连接到一个总大小为150kb的文件(50kb gzipped)。

我想知道使用AMD,require.js或者类似的文件大小的哪个点是合理的。

简短的回答: 〜100-150kb将是一个非常大的警告标志,但文件大小不是唯一的指标。 此外,检查是否正在加载块响应和UI加载以及多less(在Chrome的devtools中查看networking面板)对做出正确的决定非常重要。

长答案:使用asynchronous加载的原因是文件大小较less,更多的是关于代码和时间部分的使用模式。 我们的想法是加载初始加载所需的最小值,这样页面将尽可能快地加载,用户得到最快的响应体验,然后在后台加载将来需要的资源。

一个150kb的文件是很多的(例如,你的50KB gzipped这样不那么可怕),但如果js文件加载不阻止用户界面渲染,那么文件大小是一个问题。 我的意思是,如果用户没有注意到页面加载延迟,那么没有文件大小的问题。 另外,如果是这种情况,您可能需要考虑使用asynchronous标记属性。 这当然是无效的应用程序构build在客户端的框架,如angular或ExtJs作为js呈现的用户界面。

问问自己,有多less用户使用多less次,多久(对自己说实话)。 经验法则是如果任何UI元素稍后在应用程序stream中出现,则可以稍后加载它们。 但请记住,与所有的经验法则一样,有例外是需要注意的。 良好的分析数据比任意文件大小更好,您可以真正看到UI(和代码)的哪些部分被使用以及何时使用。 也许有些人需要在stream程中加载很晚。

如果所有的代码都是预先需要的(这种情况很less),那么AMD可能不适合你。

如果你的应用程序有一个统计图表对话框,它使用了很多独特的代码,但是只有20%的用户点击打开的button,并且该button位于设置页面,然后将所有的代码与其他所有代码一起加载其他页面在设置页面或单击button时,如果没有设置页面(甚至当鼠标位于button上时),则浪费并更好。

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

这两篇文章非常有趣,可能有助于做出一些部署决策: https : //alexsexton.com/blog/2013/03/deploying-javascript-applications/ http://tomdale.net/2012/01/amd-is -不是最接听/

而且,如果你仍然想要在一个文件中加载所有东西requireJs也有它的优化工具值得一看: http ://requirejs.org/docs/optimization.html