基于vue/webpack的tinypng插件

介绍

适用于vue和webpack的tinypng插件
npm地址

特性

本地建立缓存，根据记录判断资源是否发生改变，未改变时不会重复进行压缩，节约资源

使用

第一步： 设置key

第一种：创建 tinypng.js

路径为: {你的根目录}/tinypng.js

tinypng.js:

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

第二种.set key in options.config

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

• 优先级： config里的key会覆盖tinypng.js

第二步：加载插件

webpack

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

vue

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

配置属性

config.key

tinypng的key

key:XXX,

use

是否启动插件

default: true

use: true/false,

reg

需要压缩资源后缀的正则效验

default: /.(png|jpe?g|bmp|gif)/i

reg: XXXX