3 KB 的博客首页，我是如何做到的？

[kkocdko]

迫于权重没有 V 站高，而且注册不满 300 天，希望各位到 本人博客 去看看，顺便求个 Star：kblog - GitHub

这并不是一篇网络上泛滥的“前端体积优化”文章。

百尺竿头，更进一步！本文以我的博客为例，介绍极限控制页面体积的奇技淫巧。

成果预览

眼见为实，本人博客首页 的网络传输总体积为 2.6 KB。

[ajaxfunction]

不错不错，值得学习

[jookr]

https://fatfatpig.com/
这个博客比楼主强一丢丢

[7gugu]

cool👍不过为了高速加载还是摒弃了一部分的易用性，感觉有得有失吧。

[1if5ty3]

楼主考的如何呀，想报哪个学校呢。

[ijrou]

哦，首页博客啊

[kkocdko]

@cue @1if5ty3
考砸了 emmm，上不了 211 。。。别提了别提了

[kkocdko]

@jookr 也不错呀

[zmc]

用过楼主精简的迅雷很不错，现在怎么没了？

[youthcould]

@zmc 对啊，我说怎么这么熟悉呢

[lysS]

30ms 和 100ms 能有什么区别。。。。

[Austin2035]

我的首页是 12kb，但是加载速度比你快的多了。

[v2k9]

如果要极限控制主页体积，只放超链接，不加任何特效不就够了吗？

为了速度，这种牺牲大部分性能和渲染的尝试的意义是什么？

[kkocdko]

@lookcos 我没钱买国内的服务器啊😆

[encro]

我以为 UV 3K 呢

[kkocdko]

@v2k9 “V2EX 是 way to explore 和 way too extreme 的缩写。前者是我们每天都产生的探索世界的好奇心，而后者，是我们将一件事情做到极致的态度和决心。”

[Lemeng]

强强，支持一下

[cyrbuzz]

支持一下。

有几个疑问：

1.为什么将所有资源打包在一起是一个比分块走的更远的选择？一般来说除非加载的这个文件所有内容都会在当前页面立马展示出来否则的话并没有感觉到比分块更好的地方？

2. 直接写 data URL 的缺点很明显，不利于维护。

3. 分域名加载区分移动端和 PC 端 CSS 直接可以省一半？

[webshe11]

极客 虽然我自己用不着 但是应当表示支持

[iPhone9]

你用的 node 几，我刚刚运行就报错了。

[kkocdko]

@cyrbuzz
1. 首先，当前的代码已经非常精简，用 Chrome 的 Coverage 工具可以看到，首页的代码利用率已经达到了 78%，分块并不能带来明显的改善。其次，这样打包能让生成的静态页面更简练，页内跳转的时候加载量更小一些。

2. 所以我并没有选择用 data-xxx 自定义属性。

3. 这么做只节省了不到 70 个字符（可以看下源码，在 CSS media 查询的块里头）。相比于增加的复杂度，以及域名不同带来的 SEO 优化问题，个人认为当前方案更好些。至于使用 UserAgent 判断用户设备，这就无法使用静态托管实现了。

总之，的确是有很多可以继续优化的地方。但是很多时候这些优化方法都需要动态特性，都掣肘于：我想白嫖 Vercel 的免费静态托管。