webpack性能优化--打包小图片时进行Base64转码

优点：

base64就是一串字符串码表示的图片，在加载页面和js时一块加载出来，减少了加载图片时的http请求。加载一张图片时会发起一次http请求，http请求每次建立都会需要一定的时间，对于加载一张小图来说，下载图片所需的时间会比建立http请求的时间要短，

所以对小图进行base64转码是优化http请求，保证页面加速渲染，加快页面加载速度。

缺点：

base64会增加图片本身的大小，对于小图来说，转码增加的大小导致js加载延时能远远弥补建立http请求的时长。这种取舍是划算的。可是对于大图来说，这样的取舍是不划算的。

一般开发环境不做base64转换

开发环境中直接使用file-load处理图片

module.exports = {
    mode: 'development',
    module: {
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    }
}

这样打包出来的图片是个地址

image.png

生产环境处理

url-loader只能处理css中的url引入的文件，要处理html中的img标签，还需要引入一个html-loader。

module.exports = {
    mode: 'production',
    module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,

                        // 打包到 img 目录下
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
          // html中的img图片资源处理
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    esModule: false,
                }
            },
            // 其他资源处理
            {
                exclude: /\.(html|css|js|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    naem: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    }

}