我正在构建一个应用程序，它本质上具有很大的灵活性并且在组件系统上工作，这意味着任何页面都可以有0-10个组件。
由于页面将来自数据库，我的PHP代码在编译之前不会知道正在使用哪些组件。
每个组件都可能有自己的一组js函数（我使用vue js，但这与问题无关）。
现在我不禁想从http /加载的角度来看最好。
我的选择是：
为每个组件创建一个js文件，并在检测到它的使用时选择性地加载每个1（这也意味着在显示之前通过php对内容进行正则表达式）。
有一个包含所有组件js的大js文件，并且总是加载这个1文件。
让每个组件通过php将其js注册为字符串，并使动态网址连接每个使用过的组件js并在页面加载时发送
两种选择都不容易＆＃34;因为1在js方面更容易，但需要更多的PHP来检测和加载文件。和2我可以使用gulp来构建一个主要的连续文件。 3可能是最简单的，但我知道通过php发送js可能是三者中性能最差的。
选项1意味着10个小文件的http请求
选项2将是1-2个http请求，但是更大的文件（大约10＆＃39;）
选项2也可能意味着只使用了一小部分js（甚至没有）
选项3意味着每个页面都有不同的js url，更多的php编译和更少的可缓存性。
我可以将选项2分解为2个文件（以js登录并注销js）并始终加载已注销并仅在用户登录时加载已登录的内容，这将有所帮助，并且还设置了一些严重的缓存文件。
所以任何人都对最新的路线有任何意见吗？
我倾向于选择2考虑1-2请求和缓存，但不希望得到所有内容，然后重建它，如果我得到大的回击，因为它错误的方式（这将是一个开源项目）。
我知道＆＃34;测试它并看到＆＃34;是一个可能的反应，但我必须强调该项目处于早期阶段，并将随着时间的推移而增长，所以目前只有很少的组件，但将来会有很多，所以需要一条基于10＆＃39的工作路线;组件的组成部分（如果它有所不同，我无法看到它进入100＆＃39;）
我可能会混淆一些，基本上问题是：
根据页面组件使用量加载x每页js文件（仅加载js）
或
每页加载1个js文件，其中js文件包含所有js，即使页面上没有使用js文件（文件可能比单个文件路径大10倍）
答案 0 :(得分：0)
通常的方法是一两个文件。没有大小的汗水，浏览器会在第一次加载时缓存它，并且每次刷新都不会重新加载。多个文件意味着多个连接，这样会慢一些
答案 1 :(得分：0)
没有一种方法是最好的。
在考虑这个问题时，有许多事情需要考虑。以下几点可以帮助您做出决定：
1-通常，浏览器可以从单个页面向单个URL发出2-3个并发http请求。这意味着如果你单独加载大量的JS文件，浏览器一次只能下载2-3个资源（js文件，css文件，图像，媒体等等）。这当然会减慢事情。这个问题有几个解决方案，它们可以一起使用。
第一个一个是将所有js文件分组为1个缓存的js文件。是的，这将是一个更大的文件，但有适当的缓存标头以及来自ISP和浏览器的大量缓存JS / CSS文件，这意味着在下次访问时从缓存中检索文件。如果您有许多回访者，这将是一个有用的选项。
第二解决方案是从多个子域/域加载多个资源（例如：res.yourdomain.com，img.yourdomain.com等等）。这将允许浏览器同时加载您的文件，因为它们来自单独的＆＃34;域＆＃34;。
2-你必须平衡使用PHP正则表达式或其他方法选择正确的js文件的处理量，而不是加载一个大文件。
这里需要考虑的是，每个会话的js组件是否正在为用户进行更改。这意味着，如果用户能够在整个应用程序中导航并在一个会话中单击一次使用这些不同的组件，我宁愿加载和缓存所有JS文件，以免不能从无法从中检索的副本加载缓存。同样，这将全部取决于JS文件的总大小。但一般来说，最好先加载一次，然后从缓存中检索它，当然如果在JS文件中没有动态编写任何内容使其无法访问＆＃34;。
最重要的是，缓存是任何大/高负载应用程序中不可或缺的一部分，你不能没有它。
如果您可以提供有关应用程序的特定体系结构和特定示例的更多信息，我可以编辑答案并提供更多信息。
答案 2 :(得分：0)
我所做的是为项目的每个部分提供一些文件：
我想对于你的情况，它将取决于需要多个JS组件的页数以及你拥有的JS组件文件的总数。没有一个适合所有人的解决方案，您必须弄清楚哪些文件最适合您的项目（作为核心 js）。
这取决于您的限制因素，请使用pingdom和Chrome的瀑布检查员等工具来查看瓶颈，并进行相应的实验。
老实说，如果文件大小不是很大，我会说只将所有核心代码转储成一个，然后将在另一个中修改脚本（两个 JS文件用于整个站点）。但是，如果每个页面都需要不同的JS文件组合，并且它们相加很多（文件大小），请谨慎分割。