Tinyimg Webpack Plugin 是一个压缩图像的Webpack扩展器,提供JPGPNG的压缩功能, 一般压缩都是使用谷歌的免费小熊猫,该插件整合了小熊猫的功能,通过异步调用接口,队列处理图片,原本是有一个原理性的介绍帖,不过被删除了。。。

以下是vue-cli3为例子说明

安装

npm i tinyimg-webpack-plugin

安装准备

  • 提前安装webpackwebpack-clinpm i webpack webpack-cli
  • 必须依赖webpack 4.0.0以上和webpack-cli 3.0.0以上

安装失败

  • 切换NPM镜像为淘宝镜像:npm config set registry https://registry.npm.taobao.org/
  • 重新执行安装命令:npm i tinyimg-webpack-plugin

使用

配置功能格式描述
enabled是否启用插件true/false建议只在生产环境下开启
logged是否打印日志true/false打印压缩图像相关信息

webpack.config.jswebpack配置插入以下代码。

commonJS

const TinyimgPlugin = require("tinyimg-webpack-plugin");

module.exports = {
    plugins: [
        new TinyimgPlugin({
            enabled: process.env.NODE_ENV === "production",
            logged: true
        })
    ]
};
ESM

必须在babel加持下的Node环境中使用

import TinyimgPlugin from "tinyimg-webpack-plugin";

export default {
    plugins: [
        new TinyimgPlugin({
            enabled: process.env.NODE_ENV === "production",
            logged: true
        })
    ]
};

测试结果

原文链接

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注