設定 Imagemin Webpack 外掛程式
這個 Glitch 已包含 webpack、webpack-cli 和 imagemin-webpack-plugin。如要新增 Imagemin 設定，您必須編輯 webpack.config.js 檔案。
這項專案的現有 webpack.config.js 已從 images/ 目錄將圖片複製到 dist/ 目錄，但尚未壓縮。
- 按一下「Remix to Edit」，讓專案可供編輯。
- 首先，在
webpack.config.js頂端新增此程式碼，以宣告 Imagemin 外掛程式：
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- 接著，將下列程式碼新增為
plugins[]陣列中的最後一個項目。這會將 Imagemin 新增至 Webpack 使用的外掛程式清單中：
new ImageminPlugin()
✔✔ 簽到
完整的 webpack.config.js 檔案現在應如下所示：
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin()
]
}
現在您有了使用 Imagemin 壓縮圖片的 Webpack 設定。
執行 Webpack
- 按一下「終端機」 (注意：如果「終端機」按鈕未顯示，您可能需要使用「全螢幕」選項)。
- 如要壓縮圖片，請在主控台中輸入下列指令來執行 webpack：
webpack --config webpack.config.js --mode development
但如果在實際工作環境模式下執行 Webpack，會發生什麼情況？
- 重新執行 Webpack，但這次是正式環境模式：
webpack --config webpack.config.js --mode production
此時，Webpack 會顯示警告，告知您的 PNG 檔案即使經過壓縮，仍會超過建議的大小限制。(Webpack 的 development 和 production 模式會優先處理不同內容，因此只有在以實際工作環境模式執行 Webpack 時，才會看到這則警告)。
自訂 Imagemin 設定以修正這項警告。
自訂 Imagemin 設定
將下列物件傳遞至 ImageminPlugin()，以新增壓縮 PNG 圖片的設定：
{pngquant: ({quality: [0.5, 0.5]})}
這個程式碼會指示 Imagemin 使用 Pngquant 外掛程式壓縮 PNG 檔。quality 欄位使用 min 和 max 範圍的值來判斷壓縮層級，0 是最低，1 是最高值。如要強制所有圖片以 50% 的品質壓縮，請同時傳遞 0.5 做為最小值和最大值。
✔✔ 簽到
您的 webpack.config.js 檔案現在看起來應像這樣：
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
})
]
}
那麼 JPEG 呢？該專案也有 JPEG 圖片，因此也應該指定圖片的壓縮方式。
自訂 Imagemin 設定 (續)
不要使用 imagemin-webpack-plugin 的預設外掛程式進行 JPG 壓縮 (imagemin-jpegtran)，而是使用 imagemin-mozjpeg 外掛程式。有別於 Jpegtran，Mozjpeg 可讓您為 JPG 壓縮指定壓縮畫質。我們已在這個 Glitch 中為您安裝 Mozjpeg 外掛程式，但您必須編輯 webpack.config.js 檔案：
- 在
webpack.config.js檔案頂端新增下列程式碼，即可初始化imagemin-mozjpeg外掛程式：
const imageminMozjpeg = require('imagemin-mozjpeg');
- 將
plugins屬性新增至傳遞至ImageminPlugin()的物件，讓物件現在如下所示：
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
此程式碼會指示 Webpack 使用 Mozjpeg 外掛程式，將 JPG 壓縮至 50 畫質 (0 是最糟的 100 分最佳)。
如果要新增的外掛程式設定是 imagemin-webpack-plugin 的預設外掛程式，您可以將這些設定新增為傳遞至 ImageminPlugin() 物件的鍵/物件配對。Pnquant 的設定就是一個很好的範例。
不過，如果要新增非預設外掛程式的設定 (例如 Mozjpeg)，應在與 plugins 屬性對應的陣列中加入這些外掛程式。
✔✔ 簽到
您的程式碼現在應如下所示：
const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
]
}
使用 Lighthouse 重新執行 Webpack 並驗證結果
- 在控制台中重新執行 Webpack：
webpack --config webpack.config.js --mode production
太棒了！您的變更應修正 Webpack 警告。
Webpack 會針對大型圖片發出警告，但無法告訴您圖片是未經壓縮或未經壓縮的。因此，建議您使用 Lighthouse 驗證變更。
Lighthouse 的「有效編碼圖片」效能稽核功能可協助您瞭解網頁上的 JPEG 圖片是否已以最佳方式壓縮。
- 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示
。 - 在 Glitch 上執行 Lighthouse 效能稽核 (依序點選「Lighthouse」>「選項」>「效能」)，並確認已通過「有效編碼圖片」稽核。
太好了，您已使用 Imagemin 以最佳方式壓縮網頁上的圖片。