Image compression method in vue project

In the project, we usually encounter that the image static resource is too large, so how do we compress the image size?

Method 1: PS or online website for image compression.

Recommended Site 1

https://tinypng.com/

This website can compress pictures in batches. Of course, if you compress too much at one time, the website will report an error that the compression is not successful. It doesn't matter, just try again a few times.

Moreover, you can repeatedly press many times, so that the size of the picture can be reduced all the time.

Recommended Site 2

https://www.bejson.com/ui/compress_img/

The advantage of this website is that you can customize the compression volume, but the disadvantage is that you can only compress one picture at a time.

Method 2: Image compression in the form of npm package

Install third-party packages with the following command

cnpm i image-webpack-loader -D

Then configure the vue.config.js as follows:

module.exports = {
  publicPath: '', // If it is empty, the project can be placed anywhere on the server
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px", //The unit to be converted, the default is "px"
            viewportWidth: 1920, // The width of the window corresponds to the width of our design draft, usually 750
            unitPrecision: 5, //Precision retained after unit conversion
            propList: [ //Property list that can be converted to vw
              "*"
            ],
            viewportUnit: "vw", // the desired viewport unit
            fontViewportUnit: "vw", //The viewport unit used by the font
            selectorBlackList: [], //CSS selectors that need to be ignored will not be converted to viewport units, and the original units such as px will be used.
            minPixelValue: 1, //Set the minimum conversion value, if it is 1, only values ​​greater than 1 will be converted
            mediaQuery: false, //Whether the unit in the media query needs to be converted
            replace: true, //Whether to replace the attribute value directly without adding alternate attributes
            exclude: /(\/|\\)(node_modules)(\/|\\)/, //Ignore files under certain folders or specific files, such as files under 'node_modules'
          })
        ]
      }
    }
  },
  productionSourceMap: false,
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  },
}

Note: You only need to add the part marked in red in module.exports. In this way, the image size can be compressed when packaging npm run build.

summary:

In the project, you can combine method 1 and method 2 to compress the image size in the project to achieve the effect of speeding up the access.