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能夠在構建時自動壓縮圖片，提升咱們的開發效率。