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

August 08, 2019 1609

背景：

很多时候我们开发是直接在蓝湖上面下载ui的切图png/jpg，一般采用png。这些图片包括icon/background图片都还有压缩的空间，我们上线前当然希望保证用最小体积的图片，提高我们的加载速度，但是我们不希望这个动作是我们手动的压缩，url-minified-loader可以帮我们在构建时自动压缩图片。

url-minified-loader (源码)

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

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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：

利用url-minified-loader可以在构建时自动压缩图片，提高我们的开发效率。

查看评论