项目优化-图片压缩

发表于： 2020年8月25日 2020年8月25日
分类：编程思想

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

以下是vue-cli3为例子说明

安装

npm i tinyimg-webpack-plugin

安装准备

提前安装webpack和webpack-cli：npm 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.js或webpack配置插入以下代码。

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
        })
    ]
};