https://github.com/ichengbo/react-native-imagemin-asset-plugin
React Native plugin for compressing image assets in builds. 用于在项目构建阶段自动压缩图片资源的RN插件。
https://github.com/ichengbo/react-native-imagemin-asset-plugin
asset-plugin imagemin metro react-native
Last synced: 6 months ago
JSON representation
React Native plugin for compressing image assets in builds. 用于在项目构建阶段自动压缩图片资源的RN插件。
- Host: GitHub
- URL: https://github.com/ichengbo/react-native-imagemin-asset-plugin
- Owner: iChengbo
- License: mit
- Created: 2021-08-13T06:03:49.000Z (about 4 years ago)
- Default Branch: dev
- Last Pushed: 2024-09-27T18:15:45.000Z (about 1 year ago)
- Last Synced: 2025-04-24T01:09:44.723Z (6 months ago)
- Topics: asset-plugin, imagemin, metro, react-native
- Language: TypeScript
- Homepage:
- Size: 7.91 MB
- Stars: 17
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README-CN.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# react-native-imagemin-asset-plugin
[](https://github.com/semantic-release/semantic-release)
[](./LICENSE)
[](https://www.npmjs.com/package/react-native-imagemin-asset-plugin)
[](https://www.npmjs.com/package/react-native-imagemin-asset-plugin)
**用于压缩 React-Native 图片资源的 metro 插件**
> 使用 [imagemin](https://github.com/imagemin/imagemin) 完美压缩 PNG, JPG, JPEG 格式图片或者将其转为 WEBP 格式图片。
## 安装
```sh
yarn add -D react-native-imagemin-asset-plugin imagemin
```
or
```sh
npm install --save-dev react-native-imagemin-asset-plugin imagemin
```
## 配置
你可以通过修改 `metro.config.js` 文件，在 `transformer` 中添加 `assetPlugins` 属性，并设置为 `['react-native-imagemin-asset-plugin']`
根据需求选择不同的压缩方式，有以下两种搭配供参考：
**推荐用于无损优化的 imagemin 插件**
```sh
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev
```
**推荐用于有损优化的 imagemin 插件**
```sh
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev
```
对于 `imagemin-svgo` v9.0.0+ 需要使用 svgo [配置](https://github.com/svg/svgo#configuration)
**metro.config.js (React Native Cli)**
```js
module.exports = {
transformer: {
// ...
assetPlugins: ['react-native-imagemin-asset-plugin'],
imageminAssetPlugin: {
cacheDir: '.compressed-images',
minimizer: {
implementation: 'imagemin',
options: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
['pngquant'],
]
}
}
},
},
};
```
**metro.config.js (Expo Go)**
```js
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
// use plugin to compress assets
config.transformer.assetPlugins.push('react-native-imagemin-asset-plugin');
config.transformer.imageminAssetPlugin = {
cacheDir: '.compressed-images',
minimizer: {
implementation: 'imagemin',
options: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
['pngquant'],
]
}
}
}
module.exports = config;
```
## LICENSE
[MIT](./LICENSE)
## 其他
...