前端-图片压缩，基于vue/webpack的tinypng插件

介绍/info

auto compress img by tinypng when used webpack or vueThis 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 suffixdefault "tinypng"

配置文件名称默认为"tinypng"

configName: ""

option.cachePath

cache pathdefault ".tinypng"

压缩记录缓存路径默认为".tinypng",基于根目录

cachePath: ""

option.cacheName

cache namedefault "hash.json"

压缩记录缓存文件名默认为"hash.json"

cacheName: ""

option.reg

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

需要压缩资源后缀的正则效验默认: /.(png|jpe?g|bmp)/i

reg: XXXX

option.use

true/false run this plugindefault: true

是否启动插件默认: true

use: true/false,

option.cache

Whether to record compressed cachedefault: true

是否启用缓存记录默认: true

cache: true/false,

option.config

option.config.key

your key

tinypng的key

key:XXX,

option.config.method

resize method scale/fit/cover/thumblook

图片调整模式 支持:scale/fit/cover/thumb详情参考

method: ""

option.config.width

resize asset width

调整图片的宽度尺寸

width: ""

option.config.height

resize asset height

调整图片的高度尺寸

height: ""