url-minified-loader 构建时自动优化图片

背景：

不少时候咱们开发是直接在蓝湖上面下载ui的切图png/jpg，通常采用png。这些图片包括icon/background图片都还有压缩的空间，咱们上线前固然但愿保证用最小体积的图片，提升咱们的加载速度，可是咱们不但愿这个动做是咱们手动的压缩，url-minified-loader能够帮咱们在构建时自动压缩图片。

url-minified-loader (源码)

好处：在转化base64前压缩。先进行压缩，若是符合limit，转为base64，不然返回压缩后结果

url-minified-loader结合url-loader 利用imagemin 在构建时利用imagemin下面的plugins动态将图片文件压缩， 而后根据limits是否生成base64，若是压缩后图片大于limit，就返回压缩后的图片，进入fallback

示例

oneOf: [
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
            use: [
              {
                // loader: "url-loader",
                "url-minified-loader",
                options: {
                  limit: 5 * 1024,
                  //https://github.com/imagemin/imagemin
                  plugins: [
                    //https://github.com/imagemin/imagemin-pngquant/blob/master/index.js
                    require("imagemin-pngquant")({ quality: [0.01,0.01] })
                  ],
                  fallback: require.resolve('responsive-loader'),
                  name: "[name].[hash:8].[ext]"
                }
              }
            ]
          }
]
复制代码

可选的压缩plugins：

• imagemin-gifsicle
• imagemin-mozjpeg
• imagemin-optipng
• imagemin-svgo

require('imagemin-gifsicle')({}),
 require('imagemin-mozjpeg')({}),
 require('imagemin-optipng')({}),
 require('imagemin-svgo')({})
复制代码

利用url-minified-loader能够在构建时自动压缩图片，提升咱们的开发效率。