第六篇 提升网页性能：深入解析HTTP请求优化策略（一）

资源合并与压缩技术

资源合并与压缩技术是前端性能优化中至关重要的手段，它们主要用于减少HTTP请求的数量以及减小每个请求的数据量，从而提升网页加载速度和用户体验。以下是对这两种技术的详细介绍：

1 资源合并（Concatenation）

资源合并主要是将多个小型静态资源（如JavaScript文件、CSS样式表、图片等）合并成一个或几个较大的文件。这样做的主要目的是减少浏览器对服务器发起HTTP请求的数量。因为在HTTP/1.x时代，浏览器对于同一域名下的并发请求数量有限制（通常为6个），过多的小文件会阻塞后续资源的加载。通过合并这些资源，可以显著减少因建立和关闭TCP连接产生的延迟开销。

2 资源压缩（Minification）

资源压缩则是通过对原始资源进行特定处理，去除不必要的字符、注释、空白符以及进行代码优化，使得文件大小变小，从而加快网络传输的速度。

2.1 文本资源压缩

• JS压缩：使用工具如UglifyJS、Terser等删除注释、缩短变量名、简化表达式等，生成最小化的JavaScript代码。
• CSS压缩：类似地，有CSSNano这样的工具可以压缩CSS代码，移除空格、换行和注释，并优化CSS选择器。
• HTML压缩：移除HTML中的多余空白字符、换行及注释，但要注意保持HTML结构的有效性。

2.2 媒体资源压缩

• 图片压缩：使用各种格式转换工具（如TinyPNG、imagemin等）进行无损或有损压缩，或将高分辨率图片适配不同的屏幕尺寸，采用响应式图片方案。
• 视频压缩：通过编码工具（如FFmpeg）对视频进行转码，降低比特率和分辨率以减小文件大小。

// 使用Webpack配合UglifyJSPlugin实现代码压缩
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // 其他配置项...
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        test: /\.js(\?.*)?$/i,
        sourceMap: true,
        parallel: true,
        cache: true,
      }),
    ],
  },
};

3 实践方法

3.1 CSS合并于压缩

将多个CSS文件合并为一个，以减少样式表加载数量。
CSS合并通常可以通过构建工具如Gulp、Grunt或Webpack配合相应的插件来实现。以下是一些常用的Node.js插件及其用法详解：

1. 使用Gulp + gulp-concat

   // 安装gulp以及gulp-concat插件
   npm install --save-dev gulp gulp-concat
   
   // 在gulpfile.js中配置任务
   var gulp = require('gulp');
   var concat = require('gulp-concat');
   
   gulp.task('concat-css', function() {
     return gulp.src(['css/style1.css', 'css/style2.css']) // 指定要合并的CSS文件路径
       .pipe(concat('all.css')) // 合并后的文件名
       .pipe(gulp.dest('dist/css')); // 输出合并后CSS文件的目标路径
   });
   
   // 运行任务
   gulp.run('concat-css');
   

2. 使用Gulp + gulp-clean-css

   除了合并，还可以在合并的同时进行压缩。安装gulp-clean-css插件以压缩CSS。

   npm install --save-dev gulp-clean-css
   
   // 修改上述任务为同时合并和压缩
   var cleanCSS = require('gulp-clean-css');
   
   gulp.task('concat-and-minify-css', function() {
     return gulp.src(['css/style1.css', 'css/style2.css'])
       .pipe(concat('all.min.css'))
       .pipe(cleanCSS()) // 压缩CSS
       .pipe(gulp.dest('dist/css'));
   });
   

3. 使用Webpack + mini-css-extract-plugin

   Webpack也支持CSS资源的合并与优化。结合mini-css-extract-plugin可以将CSS从JS文件中提取出来，并且可以和其他优化插件（如optimize-css-assets-webpack-plugin）一起使用。

   // webpack.config.js
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
   
   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             MiniCssExtractPlugin.loader, // 提取CSS到单独文件
             "css-loader", // 解析CSS导入语句
           ],
         },
       ],
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: "[name].min.css", // 输出CSS文件名
       }),
       new OptimizeCSSAssetsPlugin({}), // CSS压缩插件
     ],
   };
   

以上展示了如何通过不同的Node.js构建工具及其插件来实现CSS文件的合并和压缩操作。在实际项目中，可以根据具体需求选择合适的工具和流程。

3.2 JavaScript合并与压缩

将多个JS脚本合并为一个大脚本或者按需模块打包，避免多次加载脚本阻塞页面渲染。

在Node.js环境中，用于JavaScript合并和压缩的常见插件主要包括用于构建工具如Gulp、Grunt以及Webpack的插件。以下是一些常用的插件及其用法详解：

Gulp + gulp-concat 和 gulp-uglify

gulp-concat：用于合并JavaScript文件。

安装：

npm install --save-dev gulp gulp-concat

使用示例：

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('concat-js', function() {
  return gulp.src(['src/js/*.js']) // 指定要合并的JS文件路径
    .pipe(concat('all.js')) // 合并后的文件名
    .pipe(gulp.dest('dist/js')); // 输出合并后JS文件的目标路径
});

// 运行任务
gulp.run('concat-js');

gulp-uglify：用于压缩合并后的JavaScript代码。

安装：

npm install --save-dev gulp-uglify

添加到上述任务中进行合并与压缩：

var uglify = require('gulp-uglify');

gulp.task('concat-and-minify-js', function() {
  return gulp.src(['src/js/*.js'])
    .pipe(concat('all.min.js'))
    .pipe(uglify()) // 压缩JS
    .pipe(gulp.dest('dist/js'));
});

Webpack + webpack.optimize.concatenateModules（已弃用） 和 TerserWebpackPlugin

注意: Webpack从v4开始不再直接提供webpack.optimize.concatenateModules插件，而是通过其内部优化算法自动实现模块的合并。

现代WebPack项目通常会通过配置mode: 'production'开启内置的压缩优化功能，或者显式地使用TerserWebpackPlugin。

安装TerserWebpackPlugin：

npm install --save-dev terser-webpack-plugin

在Webpack配置中启用TerserWebpackPlugin：

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.min.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()], // 使用TerserPlugin进行压缩
  },
};

对于合并，Webpack本身处理模块依赖时就已经实现了资源的合并，无需额外配置。当多个模块通过import或require关联时，最终生成的bundle会包含所有引用到的模块内容。如果需要对特定类型的文件进行手动合并，可以考虑使用entry点数组来指定多个入口文件，它们会被合并到一个bundle中。

Rollup + rollup-plugin-terser

Rollup也有相应的插件用来合并和压缩JavaScript代码，比如rollup-plugin-terser。

安装：

npm install --save-dev rollup-plugin-terser

在Rollup配置中启用rollup-plugin-terser：

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'iife',
  },
  plugins: [
    terser(), // 使用terser进行压缩
  ],
};

在Rollup中，由于其模块打包机制，默认情况下已经将所有引入的模块进行了合并。所以，Rollup主要关注的是如何将多个输入文件整合为单个输出文件，并在此过程中进行代码压缩。

3.3 雪碧图（CSS Sprite）

构建CSS雪碧图（CSS Sprite）主要分为两个步骤：合并图片和编写对应的CSS样式。

步骤一：合并图片

1. 手动合并：

   • 使用图像处理软件，如Adobe Photoshop、GIMP等，将多个小图标或者背景元素拼接到一张大图上，确保各个部分之间有一定的间距，并且记录下每个元素在大图中的位置坐标。

2. 自动工具合并：

   • 使用自动化构建工具如gulp、grunt配合插件进行自动化合并。例如，使用gulp.spritesmith或grunt-spritesmith等插件可以自动生成雪碧图以及相应的CSS样式文件。

   以下是一个使用gulp.spritesmith生成雪碧图的示例配置：

   // 安装所需插件
   npm install --save-dev gulp.spritesmith
   
   // 在gulpfile.js中添加任务
   const gulp = require('gulp');
   const spritesmith = require('gulp.spritesmith');
   
   function generateSprites() {
     return gulp.src('src/images/icons/*.png') // 指定源文件目录下的所有PNG图标
       .pipe(spritesmith({
         imgName: 'spritesheet.png', // 输出雪碧图文件名
         cssName: '_sprites.scss' // 输出样式表文件名
         // 其他配置项，如cssTemplate, padding, algorithm等
       }))
       .pipe(gulp.dest('dist/images')); // 输出雪碧图到目标目录
   }
   
   // 注册任务
   gulp.task('sprites', generateSprites);
   

步骤二：编写CSS样式

• 对于已经合并好的雪碧图，需要编写CSS来引用并定位每个子图标的显示位置。

/* 假设雪碧图的类名为 .sprite */
.sprite {
  background-image: url('spritesheet.png'); /* 引用雪碧图 */
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0; /* 根据实际计算得到的偏移量设置 */
}

.icon-settings {
  width: 16px;
  height: 16px;
  background-position: -32px -32px; /* 根据实际计算得到的偏移量设置 */
}

在上述代码中，.icon-home 和 .icon-settings 是你页面中需要用到不同图标的元素的类名，它们通过 background-position 属性来指定在雪碧图中的位置，从而显示出正确的图标。这些位置值应当根据实际雪碧图中各小图标的排列顺序和间距来进行精确计算。如果使用了像gulp.spritesmith这样的插件，则会自动生成包含正确位置信息的CSS样式文件，无需手动计算。