前端开发资源压缩与请求优化

在现代Web开发中，资源压缩与请求优化是提升页面加载速度、提高用户体验的关键步骤。通过减少资源大小和 HTTP请求次数，可以显著缩短页面的加载时间。

以下将详细介绍资源压缩和请求优化的常用方法和最佳实践。

1. 资源压缩

资源压缩是指对JavaScript、CSS、图片等资源进行压缩处理，以减少文件大小，从而提高页面加载速度。常见的资源压缩技术包括代码压缩和传输压缩。

1.1. JavaScript压缩

JavaScript压缩工具：

• UglifyJS：可以删除代码中的空白字符、注释、简化代码逻辑、重命名变量等。

• Terser：是UglifyJS的分支，支持ES6+代码压缩。

使用Terser压缩JavaScript文件：

npx terser src/app.js -o dist/app.min.js --compress --mangle

1.2. CSS文件压缩

CSS压缩工具：

• CSSnano：一个模块化的CSS压缩工具，支持去除无用的CSS代码，压缩CSS文件大小。

• Clean-CSS：一个快速的CSS压缩工具，可以通过命令行或API使用。

使用cssnano压缩CSS文件：

npx cssnano src/styles.css dist/styles.min.css

1.3. 图片压缩

图片通常是网页中最占资源的部分，使用适当的工具压缩图片可以显著减少文件大小。常用的图片压缩工具包括：

JPEG/PNG 压缩:

• ImageOptim: 支持无损压缩 JPEG、PNG 和 GIF 格式的图片。

• TinyPNG: 一个流行的在线工具，支持 JPEG 和 PNG 图片的压缩。

WebP 格式:

• cwebp: 将图片转换为 WebP 格式，WebP 通常比 JPEG 和 PNG 更小。

• 参考：https://developers.google.com/speed/webp/download?hl=zh-cn

使用 cwebp 将图片转换为 WebP 格式：

cwebp src/image.png -o dist/image.webp

1.4. 文本文件压缩

在传输文本文件（如 HTML、CSS、JavaScript）时，可以使用服务器端压缩技术，如 Gzip 或 Brotli，以减少传输的字节数。

• Gzip 压缩: 是最常见的压缩算法，广泛支持且配置简单。

• Brotli 压缩: 由 Google 开发的压缩算法，压缩率比 Gzip 更高，特别适合静态资源的压缩。

Node API 来处理 gzip、brotli 压缩：

https://nodejs.org/api/zlib.html#class-zlibgzip

https://developers.google.com/speed/webp/download?hl=zh-cn

配置 Nginx 以使用 Gzip 和 Brotli 压缩：

# Nginx 配置示例

# 启用 Gzip 压缩
gzip on;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
gzip_min_length 256;

# 启用 Brotli 压缩
brotli on;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;
brotli_min_length 256;

2. 请求优化

请求优化是指通过减少 HTTP 请求次数、合并文件、优化资源加载顺序等手段，提高页面加载速度。以下是一些常见的请求优化策略。

2.1. 减少 HTTP 请求数

每次 HTTP 请求都会消耗时间，因此减少 HTTP 请求数可以显著提升页面性能。常见的方法包括：

• 合并文件：将多个 CSS 或 JavaScript 文件合并为一个文件，减少请求次数。

• 内联关键 CSS 和 JavaScript：将关键的 CSS 和 JavaScript 内联到 HTML 文件中，减少外部请求。

这一点上，我们一般都是通过打包构建工具来完成的：

// Webpack 配置示例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  mode: 'production'
};

2.2. 使用懒加载、预加载、预请求

优化资源加载顺序，可以减少首次渲染时间和整体加载时间。

• 懒加载：对于图片、视频等资源，只有当它们进入视口时才加载，以减少初始页面加载时间。

<img src="placeholder.jpg" data-src="actual-image.jpg" alt="lazy loaded Image" class="lazyload">
<script>
document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = document.querySelectorAll('.lazyload');
    lazyImages.forEach(function(image) {
        image.src = image.getAttribute('data-src');
    });
});
</script>

• 预加载：提前加载即将使用的资源，例如字体、关键 CSS、JavaScript 等。

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="app.js" as="script">

• 预请求: 提前进行 DNS 解析或连接建立，以减少后续请求的延迟。

<link rel="dns-prefetch" href="/example.com">
<link rel="preconnect" href="/example.com">

2.3. 使用 HTTP/2 多路复用

HTTP/2 是一种可以显著减少延迟、提高网页加载速度的协议。它支持多路复用（Multiplexing），允许多个请求和响应在一个连接中同时进行。

配置 nginx：

server {
    listen 443 ssl http2;
    server_name example.com;

    # 其他 SSL 配置...
}

2.4. 优化服务器响应时间

优化服务器的响应时间可以减少浏览器等待时间，从而加快页面加载速度。常见的方法包括：

• 启用服务器缓存：使用 HTTP 缓存头，如 Cache-Control、ETag 等，减少不必要的服务器请求。

• 使用 CDN：利用内容分发网络（CDN）将静态资源分发到全球多个服务器节点，减少用户请求的延迟。

• 优化数据库查询：缓存频繁访问的数据，减少数据库查询时间。