前端优化记录

在写某项目前端的时候，发现零优化部署到小水管服务器上居然有将近3秒的 Speed Index 。

天下武功，无快不破，这对任何一个热爱查看应用服务器列表 ping 值是不是绿色的中年男人都是不可接受的（误）虽然中文网络相关的教程有很多，但是咱还是想借此机会水一篇文章（bushi

SplitChunks 分包

由于咱上手就使用了 Next.js， 所以这方面的配置用不到太多，大多数静态文件方面的优化已经被 Next.js 开箱即用地实现好了。分包操作只需要调用 dynamic 函数引入 React 节点即可。

图片优化

咱其实是 SVG 偏执狂，什么图片都想要用 SVG (不是嵌入图片的那一种) 来代替，以追求高分辨率。但是对于不得不用到的光栅图片，还是要做一下优化的。Next.js 官方给出了 next/Image 以优化图片。

压缩

启用文件压缩可以降低客户端等待时长，咱的网页服务器是兽兽大佬打包的 Nginx，直接在配置文件中打开 gzip 和 brotli 压缩即可。

...
	#简单地将所有类型文件压缩处理
	gzip on;
	gzip_types *;
	brotli on;
	brotli_types *;
...