blocks|key|3158303|text|合并成一个文件。让它被缓存。它在任何页面上加载一次，对于以后的任何页面，它都可以使用缓存的副本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3158304|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

combine into 1 file. let it get cached. it loads once on any page, and for any subsequent pages it can use the cached copy.

blocks|key|1530754|text|它总是平衡HTTP请求的数量，限制尚未真正需要的传输字节。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1530755|有三种可能性：|1530756|1530757|将所有内容合并到一个文件中，|ordered-list-item|1530758|有三个单独的文件，并按需要加载|1530759|有三个单独的文件，立即加载该页面所需的文件，然后(在时机合适时)预加载其他的|1530760|。|1530761|通过进行A负载测试，您将只知道什么是对您的情况最好的。|1530762|一切取决于传输数据的大小、所需功能的重叠以及需要某些功能的可能性。|1530763|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|G|7|Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Z|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|10|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|11|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

It is always an act of balancing the number of HTTP requests and limiting the transferred bytes that are not really needed yet.

There are three possibilities:

<ol>
<li>combine everything in 1 file</li>
<li>have three separate files, and load them as needed</li>
<li>have three separate files, load the one needed for that page right away and preload the others (when the time is right)</li>
</ol>

You will only know what is best for your situation by doing some A-B load testing.

Everything depends on the size of the transferred data, the overlap of needed functionality and the probability that some functionality is needed.

blocks|key|3158392|text|因为它听起来不像是有很多javascript，所以将它合并到一个文件中会更好。只有当有大量的javascript不需要加载，如果用户不访问一个页面，那么您将考虑保持文件分开。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3158393|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Because it doesn't sound like there's a lot of javascript, combining it into one file would be better. Only if there's significant amounts of javascript that doesn't need to be loaded if a user doesn't visit a page then you would consider keeping the files separate.

blocks|key|3115192|text|如果合并的文件在例如，25+it缩小，然后去它。但是如果不止这些，我会说，找出其中最大的一个，让那个js文件是分开的。把剩下的合起来。这25+up的限制也不是一个硬性的规则，这取决于你。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3115193|如果您的单个文件大小为30+js，我建议不要将它们合并，并将单个js文件缓存为单独的js文件。|3115194|希望这能有所帮助。|3115195|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

If the combined file is under say, 25kb minified, then go for it. But if it is more than that, I'd say, identify the one that is the biggest of them, and let that one js file be separate. Combine the rest. That 25kb limit thingy too is not a hard rule, it is up to you.

If your individual files are in the magnitude of say, 30kb, I'd recommend not combining them, and letting the individual js files be cached as individual js files.

Hope that helps.

blocks|key|3115257|text|我绝对会投票把它们结合起来。如果您关心“未使用”Javascript的解析或设置时间，那么我建议使用闭包中的每个文件构造Javascript，然后在需要它们的页面上运行所需的闭包。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3115258|//+File+1
window.closures+=+window.closures+%7C%7C+{}
window.closures["page1"]+=+(function()+{
++//+Javascript+for+Page+1
});

//+File+2
window.closures+=+window.closures+%7C%7C+{}
window.closures["page2"]+=+(function()+{
++//+Javascript+for+Page+2
});++++

//+File+3
window.closures+=+window.closures+%7C%7C+{}
window.closures["page2"]+=+(function()+{
++//+Javascript+for+Page+2
});|code-block|syntax|javascript|3115259|然后，在你的页面中：|3115260|
<script+type="text/javascript"+src="combined.js"></script>
<script>
++//+Run+the+Javascript+in+your+combined.js+intended+for+page2
++window.closures["page2"]()
</script>|3115261|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I would definitely vote to combine them. If you are concerned about parse or setup time for the "not used" Javascript, then I would recommend structuring your Javascript with each file in a closure, and then run the closures you need on the pages you need them. For example:

<pre><code>// File 1
window.closures = window.closures || {}
window.closures["page1"] = (function() {
 // Javascript for Page 1
});

// File 2
window.closures = window.closures || {}
window.closures["page2"] = (function() {
 // Javascript for Page 2
}); 

// File 3
window.closures = window.closures || {}
window.closures["page2"] = (function() {
 // Javascript for Page 2
});
</code></pre>

Then, in your page:

<pre><code>&lt;!-- This one combined.js file will be downloaded once and cached //--&gt;
&lt;script type="text/javascript" src="combined.js"&gt;&lt;/script&gt;
&lt;script&gt;
 // Run the Javascript in your combined.js intended for page2
 window.closures["page2"]()
&lt;/script&gt;
</code></pre>

Ok, so I know that it's obvious to combine all of a pages Javascript into a single external file for efficiency purposes, but that's not quite the question here.

Say I have Default.htm with a search field that has a little Javascript magic attached to it. Then I have Contact.htm with a contact form that has some Javascript magic attached to it. And finally I have a FAQ.htm with some jQuery panels showing the answers... you get the picture.

Basically I have three pages that all have "some" javascript need, but none of the Javascript is used on any other pages.

Is it better to combine all of that Javascript into one big minified file that loads once and is then stored in Cache, or is it better to use an individual Javascript file on the Default page, but not use it on the Contact page... etc?

What works best in this scenario?

Option: 1 

<blockquote>
 Default.htm 
 jquery.js 
 default.js 
 
 Contact.htm 
 jquery.js 
 contact.js 
 
 Faq.htm 
 jquery.js 
 faq.js 
</blockquote>

Option: 2 

<blockquote>
 Default.htm 
 jquery-default-contact-faq-min.js
 
 Contact.htm 
 jquery-default-contact-faq-min.js
 
 Faq.htm 
 jquery-default-contact-faq-min.js
</blockquote>

PS: for all you asp.net guys, I'm using Combres to Combine, Minify, and Version my Javascript files

Javascript - To combine or not combine, that is the question

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

好的，我知道为了提高效率，将所有页面Javascript合并到一个外部文件中是很明显的，但这并不是问题所在。假设我有一个搜索字段的Default.htm，该字段附带了一些Javascript魔法。然后，我有一个Contact.htm与一个联系形式，有一些Javascript魔术附加到它。最后，我有一个FAQ.htm和一...

问Javascript --组合还是不组合，这就是问题所在
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript --组合还是不组合，这就是问题所在EN