webpack-圖片壓縮

圖片壓縮和合並

在企業開發中為了提升網頁的訪問速度, 我們除了會壓縮 HTML/CSS/JS 以外, 還可以對網頁上的圖片進行壓縮和合並, 壓縮可以減少網頁體積, 合並可以減少請求次數，壓縮打包之后的圖片，每次在打包圖片之前, 我們可以通過配置 webpack 對打包的圖片進行壓縮, 以較少打包之后的體積

首先來看看沒有利用壓縮插件進行壓縮過的圖片大小，待會可以進行比對驗證，如下：

壓縮圖片

利用 image-webpack-loader/img-loader 壓縮圖片：

• https://www.npmjs.com/package/image-webpack-loader
• https://www.npmjs.com/package/img-loader

本文就以 image-webpack-loader 為例兩個插件都可以進行壓縮，首先安裝 image-webpack-loader：

npm install image-webpack-loader --save-dev

修改 webpack 配置：

{
    loader: 'image-webpack-loader',
    options: {
        mozjpeg: {
            progressive: true,
            quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
            enabled: false,
        },
        pngquant: {
            quality: [0.65, 0.90],
            speed: 4
        },
        gifsicle: {
            interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
            quality: 75
        }
    }
},

如上的配置內容當中的 quality 屬性配置的值越大，那么圖片將會被壓縮的越小那么圖片的清晰度也會隨之變模糊，最終經過 webpack 打包之后的大小如下：