Web优化训练营, 网页提速50倍

正文

请到「今天看啥」查看全文

网页加载优化中最常见的就是304 Not Modified了, 具体机制是浏览器发起请求, headers中包含If-Modified-Since,(如无缓存, 则无此头字段), 服务器对比硬盘上(或内存中)文件最后修改的时间, 如果小于或等于请求的时间, 则返回304. 否则, 则返回200, 并加上Last-Modified字段, 告诉客户端下次请求可以尝试请求是否有缓存.

具体代码如下:

(模拟实际情况中, 首页会动态生成, 加入一些广告,追踪或个性化数据, index.html并未缓存)

最终效果:

我们可以看见, 下载时间为2ms, 可以几乎忽略掉(只有HTTP Headers), 总共的加载时间也只有了120ms, 相比之前, 整整少了 869ms.

但是, 我们满足了吗?

优化(二) --- 分别打包

我们可以注意到, 我们打包出来最终只有一个js文件, 当依赖变多后(此例中只有react和react-dom, 每次修改都导致整个js文件被重新请求.所以我们想要把不同的library(甚至是项目内部公用的代码模块)提取出来.

我们首先要创建一个 webpack.vendors.config.js 来构建这些library, 或者vendor.

注意到

意味着我们可以将同一类型的包打包成一个js文件.

请到「今天看啥」查看全文