Web性能优化： 使用Webpack分离数据的正确方法
|
尽管如此，这篇2016年的文章 和 Khan Academy 2015年的文章都得出结论，即使使用 HTTP/2，下载太多的文件还是比较慢。但在这两篇文章中，“太多”的意思都是“几百个”。所以请记住，如果你有数百个文件，你可能一开始就会遇到并发限制。 如果您想知道，对 HTTP/2 的支持可以追溯到 Windows 10 上的 ie11。我做了一个详尽的调查，每个人都使用比那更旧的设置，他们一致向我保证，他们不在乎网站加载有多快。 #2:每个webpack包中没有 开销/引用 代码吗? 是的，这也是真的。 好吧,狗屎:
让我们量化一下，这样我们就能确切地知道需要担心多少。 好的，我刚做了一个测试，一个 190 KB 的站点拆分成 19 个文件，增加了大约 2％发送到浏览器的总字节数。 因此......在第一次访问时增加 2％，在每次访问之前减少60％直到网站下架。 正确的担忧是:完全没有。 当我测试1个文件对19个时，我想我会在一些不同的网络上试一试，包括HTTP / 1.1 在 3G 和4G上，这个站点在有19个文件的情况下加载时间减少了30%。 这是非常杂乱的数据。 例如，在运行2号 的 4G 上，站点加载时间为 646ms，然后运行两次之后，加载时间为1116ms，比之前长73%，没有变化。因此，声称 HTTP/2 “快30%” 似乎有点鬼鬼祟祟。 我创建这个表是为了尝试量化 HTTP/2 所带来的差异，但实际上我唯一能说的是“它可能没有显著的差异”。 真正令人吃惊的是最后两行。那是旧的 Windows 和 HTTP/1.1，我打赌会慢得多,我想我需把网速调慢一点。 我从微软的网站上下载了一个Windows 7 虚拟机来测试这些东西。它是 IE8 自带的，我想把它升级到IE9，所以我转到微软的IE9下载页面… 关于HTTP/2 的最后一个问题，你知道它现在已经内置到 Node中了吗?如果你想体验一下，我编写了一个带有gzip、brotli和响应缓存的小型100行HTTP/2服务器 ，以满足你的测试乐趣。 这就是我要讲的关于 bundle splitting 的所有内容。我认为这种方法唯一的缺点是必须不断地说服人们加载大量的小文件是可以的。 Code splitting (加载你需要的代码) 我说，这种特殊的方法只有在某些网站上才有意义。 我喜欢应用我刚刚编造的 20/20 规则:如果你的站点的某个部分只有 20% 的用户访问，并且它大于站点的 JavaScript 的 20%，那么你应该按需加载该代码。 如何决定? 假设你有一个购物网站，想知道是否应该将“checkout”的代码分开，因为只有30%的访问者才会访问那里。 首先要做的是卖更好的东西。 第二件事是弄清楚多少代码对于结账功能是完全独立的。 由于在执行“code splitting” 之前应始终先“bundle splitting’ ”，因此你可能已经知道代码的这一部分有多大。 它可能比你想象的要小，所以在你太兴奋之前做一下加法。例如，如果你有一个 React 站点，那么你的 store、reducer、routing、actions 等都将在整个站点上共享。唯一的部分将主要是组件和它们的帮助类。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
