面试题：Webpack中优化图片资源性能的常见loader有哪些及如何配置

Question

在Webpack项目中，为了优化图片资源性能，常用的loader有哪些？请简述它们的功能，并举例说明如何在Webpack配置文件中进行基本配置。

Answer 1

常用的图片资源优化loader

1. url-loader
   • 功能：可以将图片转换为Data URL格式，直接嵌入到代码中，减少HTTP请求。当图片较小时，使用Data URL能提升性能，因为它将图片数据内联到了CSS或JavaScript文件中。如果图片较大，它会自动将图片输出到文件，并返回其路径。
   • Webpack配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 8kb，小于此大小的图片转换为Data URL
                            name: 'images/[name].[ext]' // 大于limit的图片输出路径和文件名
                        }
                    }
                ]
            }
        ]
    }
};

2. file-loader
   • 功能：主要用于处理文件类型的资源，包括图片。它会将图片移动到指定的输出目录，并返回图片在输出目录中的公共路径。常用于处理较大的图片，避免Data URL带来的文件体积过大问题。
   • Webpack配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]' // 图片输出路径和文件名
                        }
                    }
                ]
            }
        ]
    }
};

3. image-webpack-loader
   • 功能：在构建过程中对图片进行压缩优化，支持多种图片格式（如JPEG、PNG、GIF、SVG等）。它可以显著减小图片文件的大小，从而加快页面加载速度，提升用户体验。
   • Webpack配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            }
        ]
    }
};

通常可以将url-loader（或file-loader）与image-webpack-loader结合使用，先对图片进行压缩，再根据图片大小决定是否转换为Data URL或输出为文件。例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'images/[name].[ext]'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            optipng: {
                                enabled: false
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            }
        ]
    }
};