設定 Imagemin webpack 外掛程式
這個 Glitch 中已包含 webpack
、webpack-cli
和
imagemin-webpack-plugin
。如要新增 Imagemin 設定,請備妥
編輯 webpack.config.js
檔案。
這項專案的現有 webpack.config.js
正在從以下位置複製圖片:
將 images/
目錄新增到 dist/
目錄,但該目錄尚未
必須先壓縮圖片
- 按一下「Remix to Edit」即可編輯專案。
- 首先,請在
webpack.config.js
:
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 --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
檔案:
- 如要初始化
imagemin-mozjpeg
外掛程式,請在webpack.config.js
檔案的上方:
const imageminMozjpeg = require('imagemin-mozjpeg');
- 將
plugins
屬性新增至傳遞至ImageminPlugin()
的物件, 物件現在應如下所示:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
此程式碼會指示 Webpack 將 JPG 壓縮為 50 的品質 (0 表示最差; 100 是最佳) 使用 Mozjpeg 外掛程式。
如果您為某個外掛程式新增設定,該外掛程式為預設外掛程式
imagemin-webpack-plugin
,這些物件可以新增為物件的鍵/物件組合
已傳遞至 ImageminPlugin()
。Pnquant 應該設定
而負責任的 AI 技術做法
有助於達成這項目標
不過,如果您要新增非預設外掛程式的設定 (例如
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 圖片會以最佳壓縮方式壓縮,
- 如要預覽網站,請按下「查看應用程式」。然後按下 全螢幕 。
- 執行 Lighthouse 效能稽核 (「Lighthouse」>「選項」>「效能」) ,並確認已有效率地為 是否通過了映像檔稽核。
大功告成!你已經使用 Imagemin 盡可能壓縮網頁上的圖片,