react-native-imagemin-asset-plugin

简体中文

v1.x README

Metro Asset plugin for compressing images in React Native.

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

Install

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

or

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

Warning

imagemin uses plugin to optimize/generate images, so you need to install them too

Configuration

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

Explore the options to get the best result for you.

Recommended imagemin plugins for lossless optimization

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

Recommended imagemin plugins for lossy optimization

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

For imagemin-svgo v9.0.0+ need use svgo configuration

metro.config.js (React Native Cli)

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)

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

Other

...