依赖于一些大文件作为依赖有效吗？

Question

我正在开发一个包含许多第三方javascript和css依赖项的Web应用程序.自从我发现了Node.js,bower和gulp之后,查找和安装这些依赖项一直是轻而易举的事.但是,我一直在积极地推行将所有javascript连接到一个文件中的策略,并且同样适用于我的所有样式表.在连接和缩小之后,我的Web应用程序仅依赖于两个相当大的文件(main.js和main.css).作为参考,我的main.js文件大小为1.6MB,而我的main.css文件大小为261KB.无论如何都不是很大,但远远超过任何一个单独的依赖本身.这是最优的,还是这些文件的增长规模最终会超过通过减少请求获得的优化？是否存在这种策略不好的情况？

Answer 1

是的。不整合资源会产生网络开销。但是当js变得这么大的时候，就应该拆分了。

所有主流浏览器均预加载您的脚本和 CSS。因此，如果您将 1.6 MB 的 js 分成 3 个，浏览器将在 4 个连接中一起加载所有三个文件和 css。

您可能认为总带宽是相同的，那为什么还要麻烦呢？但它可能会更快，因为：

1. 它从服务器获取更多带宽。
2. 它从其他程序/服务中获取更多带宽。
3. 它从同一浏览器中的其他选项卡获取更多带宽。
4. 当其他部分仍在下载时，可以解析并可能执行部分。
5. 如果只更新其中一个部分，则可以从缓存中读取其他部分。

1.6MB 非常大，如果将其拆分，您应该会看到速度的提高。但最佳位置取决于很多因素，因此您需要进行试验，看看哪种零件尺寸最适合您。

事实上，它太大了，你应该推迟剧本，正如 Mr_Green 评论的那样。首先让你的 css 和 html 运行，显示一个加载图标，然后加载你的大脚本。