博客 / 詳情

返回

前端-圖片壓縮,基於vue/webpack的tinypng插件

介紹/info

auto compress img by tinypng when used webpack or vue
This plugin can record the compression and will not recompress the file if it is not updated

適用於vue和webpack的tinypng插件,支持調整圖片尺寸
能夠根據記錄判斷資源是否發生改變,未改變時不會重複進行壓縮

npm地址

使用/how to use

設置key/set key

1.create tinypng.js

path: {your workspace}/tinypng.js

tinypng.js:

module.exports = {
    key: "XXXX",
};

2.set key in options.config

new tinypngPlugin({
    config: {
        key: "XXXX",
    }
})

import/導入

webpack

module.exports = {
    plugins: [
        new tinypngPlugin()
    ]
};

vue

configureWebpack: (config) => {
    return {
        plugins: [
            new tinypngPlugin()
        ]
    }
}

配置屬性/options

option.configName

config file name , no suffix
default "tinypng"

配置文件名稱
默認為"tinypng"

configName: ""

option.cachePath

cache path
default ".tinypng"

壓縮記錄緩存路徑
默認為".tinypng",基於根目錄

cachePath: ""

option.cacheName

cache name
default "hash.json"

壓縮記錄緩存文件名
默認為"hash.json"

cacheName: ""

option.reg

compress img reg
default: /.(png|jpe?g|bmp)/i

需要壓縮資源後綴的正則效驗
默認: /.(png|jpe?g|bmp)/i

reg: XXXX

option.use

true/false run this plugin
default: true

是否啓動插件
默認: true

use: true/false,

option.cache

Whether to record compressed cache
default: true

是否啓用緩存記錄
默認: true

cache: true/false,

option.config

option.config.key

your key

tinypng的key

key:XXX,

option.config.method

resize method scale/fit/cover/thumb
look

圖片調整模式 支持:scale/fit/cover/thumb
詳情參考

method: ""

option.config.width

resize asset width

調整圖片的寬度尺寸

width: ""

option.config.height

resize asset height

調整圖片的高度尺寸

height: ""
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.