Web性能优化： 使用Webpack分离数据的正确方法(4)

尽管如此，这篇2016年的文章 和 Khan Academy 2015年的文章都得出结论，即使使用 HTTP/2，下载太多的文件还是比较慢。但在这两篇文章中，“太多”的意思都是“几百个”。所以请记住，如果你有数百个文件，你可能一开始就会遇到并发限制。

如果您想知道，对 HTTP/2 的支持可以追溯到 Windows 10 上的 ie11。我做了一个详尽的调查，每个人都使用比那更旧的设置，他们一致向我保证，他们不在乎网站加载有多快。

#2:每个webpack包中没有 开销/引用 代码吗?

是的，这也是真的。

好吧,狗屎:

•  more files = 更多 Webpack 引用
•  more files = 不压缩

让我们量化一下，这样我们就能确切地知道需要担心多少。

好的，我刚做了一个测试，一个 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 等都将在整个站点上共享。唯一的部分将主要是组件和它们的帮助类。

因此，你注意到你的结帐页面完全独特的代码是 7KB。 该网站的其余部分是 300 KB。 我会看着这个，然后说，我不打算把它拆分，原因如下:

•  提前加载不会变慢。记住，你是在并行加载所有这些文件。查看是否可以记录 300KB 和 307KB 之间的加载时间差异。

*　如果你稍后加载此代码，则用户必须在单击“TAKE MY MONEY”之后等待该文件 - 你希望延迟的最小的时间。

•  Code splitting 需要更改应用程序代码。 它引入了异步逻辑，以前只有同步逻辑。 这不是火箭科学，但我认为应该通过可感知的用户体验改进来证明其复杂性。

让我们看两个 code splitting 的例子。

Polyfills

我将从这个开始，因为它适用于大多数站点，并且是一个很好的简单介绍。

我在我的网站上使用了一些奇特的功能，所以我有一个文件可以导入我需要的所有polyfill， 它包括以下八行：

// polyfills.js   
require('whatwg-fetch');  
require('intl');  
require('url-polyfill');  
require('core-js/web/dom-collections');  
require('core-js/es6/map');  
require('core-js/es6/string');  
require('core-js/es6/array');  
require('core-js/es6/object'); 

在 index.js 中导入这个文件。

// index-always-poly.js  
import './polyfills';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App/App';  
import './index.css';  
const render = () => {  
  ReactDOM.render(<App />, document.getElementById('root'));  
}  
render(); // yes I am pointless, for now 

使用 bundle splitting 的 Webpack 配置，我的 polyfills 将自动拆分为四个不同的文件，因为这里有四个 npm 包。 它们总共大约 25 KB，并且 90％ 的浏览器不需要它们，因此值得动态加载它们。

（编辑：ASP站长网）