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 等都将在整个站点上共享。独一的部门将首要是组件和它们的辅佐类。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
