网站性能优化实战之—— gzip (webpack, vite 开启gzip 部署)

发布网友发布时间：2024-10-05 16:31

共1个回答

热心网友时间：2024-12-03 14:47

在构建高效的个人博客网站时，技术栈的选择至关重要。本文将分享一个使用React17、Vite、Rex、Saga和TypeScript的前端解决方案，以及Node、Koa、MySQL和TypeScript的后端解决方案。前端地址位于blogs.chenliangliang.top，代码托管于GitHub的cll123456/bl，后端代码则存于GitHub的cll123456/my。

然而，虽然项目已成功构建，但初始加载时间却长达20秒，这明显影响了用户体验。为了解决这一问题，我们采用了Gzip技术，通过在服务器端和客户端进行压缩，显著减少了数据传输时间。

首先，让我们从Gzip的工作原理入手。Gzip文件可以在服务器端生成，例如通过Nginx的gzip模块或Node相关的压缩库来实现。Nginx的gzip模块会自动压缩静态资源和接口数据，并将压缩后的数据传至客户端，客户端则负责解压，从而节省了传输时间，加快页面加载速度。同样，Node的compression库也提供了压缩功能，同样是在服务器端执行压缩操作。

另外，现代的构建工具如Webpack和Vite也会自动处理压缩任务。在客户端生成Gzip文件可以避免服务器端的重复压缩操作，减少服务器负担。当客户端请求资源时，如果服务器发现已存在压缩版本的文件，则会直接提供，从而节省了每次请求时的压缩时间。这样做虽然客户端在打包时需要等待较长时间，但考虑到服务器需要面对大量的并发请求，这种方式从整体上提高了系统性能。

实战部署中，我们选择使用Nginx进行服务器端的Gzip配置。通过在Nginx配置文件中启用HttpGzip模块，可以实现在客户端请求时自动压缩并传输数据。同时，对于使用Vite构建的项目，可以利用其内置的gzip压缩功能，无需额外配置插件。

为了验证Gzip技术带来的效果，我们展示了使用Vite构建项目时的加载速度对比。经过Gzip压缩后，页面加载时间显著缩短，提高了用户体验。

综上所述，通过在服务器端和客户端部署Gzip技术，我们可以有效提升网站性能，显著减少页面加载时间，为用户提供更流畅的浏览体验。