Skip to content

Latest commit

 

History

History
105 lines (75 loc) · 3.7 KB

README.md

File metadata and controls

105 lines (75 loc) · 3.7 KB
Raw

react-native-imagemin-asset-plugin

semantic-release LICENSE npm-version npm

简体中文

Metro Asset plugin for compressing images in React Native.

Minify PNG, JPG, JPEG images or convert them to WEBP image with imagemin

example

Usage

Step 1: Install

yarn add -D react-native-imagemin-asset-plugin

or

npm install --save-dev react-native-imagemin-asset-plugin

Step 2: Configure metro.config.js

Add react-native-imagemin-asset-plugin to the list of assetPlugins in your metro.config.js file under the transformer section.

For example;

React Native Cli

module.exports = {
  transformer: {
    // ...
    assetPlugins: ['react-native-imagemin-asset-plugin'],
  },
};

Expo Go

// 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')

module.exports = config;

Configuration

You can configure the plugin behaviour through the optional imageminAssetPlugin field in your metro.config.js file under the transformer section.

For example;

module.exports = {
  transformer: {
    // ...
    assetPlugins: ['react-native-imagemin-asset-plugin'],
    imageminAssetPlugin: {
      imageminDir: '.compressed-images',
      pngquant: {
        quality: [0.6, 0.8],
      },
      mozjpeg: {
        quality: 60,
      },
    },
  },
};
Option Description Reference
imageminDir Name of directory to store compressed images. Default: .shrunken
giflossy
(deprecated)		 (Lossy) Compress GIF images https://github.com/imagemin/imagemin-giflossy
gifsicle (Lossless) Compress GIF images https://github.com/imagemin/imagemin-gifsicle
mozjpeg (Lossy) Compress JPEG images https://github.com/imagemin/imagemin-mozjpeg
jpegtran (Lossless) Compress JPEG images https://github.com/imagemin/imagemin-jpegtran
pngquant (Lossy) Compress PNG images https://github.com/imagemin/imagemin-pngquant
optipng (Lossless) Compress PNG images https://github.com/imagemin/imagemin-optipng
svgo (Lossy) Compress SVG images https://github.com/imagemin/imagemin-svgo
webp Compress JPG & PNG images into WEBP https://github.com/imagemin/imagemin-webp

LICENSE

MIT

Other

...