Project performance optimization uses url-loader to convert small images to base64, and large images use image-webpack-loader to compress

Problem Description

Some image resources are often introduced into the project, such as jpg|jpeg|png|gif|ico . Under normal circumstances, we need to do some performance optimization to see how to reduce the size of the large and small, and improve the resource loading of the production environment. speed. Therefore, this article records the use of image-webpack-loader for large pictures to compress, and uses url-loader for small pictures to convert them to base64格式 , and compares the difference before and after optimization. The following code is used by the author in the production environment, and the test is effective. You can just copy and paste

Use of url-loader

首先， url-loader image-webpack-loader file-loader ， file-loader简言之就是一个资源加载模块，去找文件资源的loader , and then you can also generate hash values for static resources, which uniquely identify ID cards. Generally no configuration is required. We mainly configure the corresponding items through url-loader and image-webpack-loader

Download url-loader and file-loader

cnpm i url-loader file-loader --save

Use url-loader to convert base64 screenshots

Unused url-loader is normal image loading, so I won't go into details here. We mainly look at the effect of converting to base64; because we have to say image-webpack-loader below, so the code is at the end

The use of image-webpack-loader

download image-webpack-loader

Please pay attention here, do not use a higher version of image-webpack-loader, otherwise errors may occur, here I am using version 6.0.0, you can use this version. In addition, file-loader has been installed before, so there is no need to install it here.

cnpm i image-webpack-loader@6.0.0 --save

Screenshot without image-webpack-loader

Screenshot using image-webpack-loader

Comparing the two pictures, we can see that after compression using image-webpack-loader , both the size and the loading time are optimized a lot, so this loader is still ok

The complete code of the two loaders

Take the vue project as an example, add the following code to chainWebpack of vue.config.js

 chainWebpack(config) {
    config.module.rule("images").test(/\.(jpg|jpeg|png|gif|ico)$/) // 给这些图片类型做压缩
        .use("url-loader") // url-loader要搭配file-loader做图片压缩
        .loader("url-loader")
        .options({
            limit: 1024 * 12,// 小于12kb的图片压缩成base64，图片太大转成base64反而不太合适
            name: "static/img/[name].[ext]"//指定打包后的图片存放的位置，一般放在static下img文件夹里 name.ext分别为：文件名.文件后缀（按照原图片名）
        })
        .end() // 返回上一级 以便于继续添加loader
        .use('image-webpack-loader')
        .loader("image-webpack-loader")
        .options({
            disable: process.env.NODE_ENV == 'development' ? true : false, // 开发环境禁用压缩，生产环境才做压缩，提升开发调试速度
            mozjpeg: { quality: 60 }, // 压缩JPEG图像，压缩质量quality为60，范围0到100
            optipng: { enabled: true }, // 压缩PNG图像，enabled为true开启压缩
            pngquant: { quality: [0.65, 0.90], speed: 4 }, // 质量区间和速度就使用默认值吧
            gifsicle: { interlaced: false }, // Interlace gif for progressive rendering 默认false
            webp: { quality: 60 } // 压缩webp图片，压缩质量quality为60，范围0到100
        })
        .end() // 返回上一级 继续添加loader
        .enforce('post') // 表示先执行配置在下面那个loader，即image-webpack-loader
},

Summarize

For detailed configuration items, go to npm or github to see. However, the above common configuration items can basically solve most needs, which are barely enough.

Good memory, not as bad writing, record it ^_^