异步脚本加载

时间:2013-12-05 09:44:39

标签: javascript node.js

我正在开发一个Node.JS应用程序。我的客户端javascript大约是1.000 LoC,还有3个库。我将我的javascript文件缩小并连接到一个总共150kb大小的文件(50kb gzip)。

我想知道在文件大小的哪个位置考虑使用AMD,require.js或类似的是合理的。

1 个答案:

答案 0 :(得分:2)

简答: ~100-150kb将是一个非常大的警告标志,但文件大小不是唯一的指标。此外,检查它是否加载阻止响应和UI加载以及多少(查看Chrome的devtools中的网络面板)对于做出正确的决定非常重要。

答案很长: 使用异步加载的原因不是文件大小,而是关于部分代码和时序的使用模式。我们的想法是加载初始加载所需的最小值,因此页面将尽可能快地加载,用户获得最快速响应的体验,然后在后台加载将来需要的资源。

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

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

如果预先需要所有代码(很少这种情况),那么AMD可能不适合您。

如果您的应用程序具有使用大量唯一代码的统计图表对话框,但只有20%的用户单击打开的按钮,该按钮位于设置页面中,然后将所有代码加载到所有内容中在设置页面或单击按钮时,如果没有设置页面(或者甚至当鼠标悬停在按钮上方)时,在其他每个页面上执行此操作都是浪费,最好这样做。

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

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

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