設定 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 以最佳方式壓縮網頁上的圖片。