项目优化-图片压缩
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
})
]
};
测试结果
