How to enable gzip compression on expo react native web?

Question

I need to enable gzip on expo but not able to find a way to implement compression-webpack-plugin inside webpack. here is webpack.config.js file which i have to modify for gzip encoding

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

const rule = {
  test: /postMock.html$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
  let config = await createExpoWebpackConfigAsync(env, argv);
 
  // If you want to add a new alias to the config.
  config.resolve.alias['react-native-maps'] = 'react-native-web-maps';
  config.resolve.alias['react-native-calendars'] = 'react-native-web-calendar';
  //   config.resolve.alias['sentry-expo'] = '@sentry/browser';
  config.resolve.alias.WebView = 'react-native-web-webview';
  config.resolve.alias['react-native/Libraries/StyleSheet/processColor'] =
    'react-native-web/src/exports/processColor';
  config.resolve.alias['react-native/Libraries/StyleSheet'] =
    'react-native-web/src/exports/StyleSheet';

  // Maybe you want to turn off compression in dev mode.
  if (config.mode === 'development') {
    // config.devServer.compress = false;
  }

  // Or prevent minimizing the bundle when you build.
  if (config.mode === 'production') {
    config.optimization.minimize = false;

  }
  module.rules = [rule];
  // Finally return the new config for the CLI to use.
  return config;
};

Answer 1

You need to install the plugin by following this: https://webpack.js.org/plugins/compression-webpack-plugin

Please take into account that if you're running on Webpack 4 (you can check it by running npm ls webpack) you need to fix compression-webpack-plugin to version 6.1.1.

Answer 2

I found a solution below is code for webpack.config.js

  const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const CompressionPlugin = require('compression-webpack-plugin');

const rule = {
  test: /postMock.html$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
  let config = await createExpoWebpackConfigAsync(env, argv);

  if (config.mode != 'development') {
    config.plugins.push(
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.js(\?.*)?$/i,
      }),
    );
  }

  config.mode = 'development';
  // log config from webpack
  console.log('Config plugins is ....');
  console.log(config.plugins);
  // If you want to add a new alias to the config.
  config.resolve.alias['react-native-maps'] = 'react-native-web-maps';
  // config.resolve.alias['react-native-calendars'] = 'react-native-web-calendar';
  //   config.resolve.alias['sentry-expo'] = '@sentry/browser';
  config.resolve.alias.WebView = 'react-native-web-webview';
  config.resolve.alias['react-native/Libraries/StyleSheet/processColor'] =
    'react-native-web/src/exports/processColor';
  config.resolve.alias['react-native/Libraries/StyleSheet'] =
    'react-native-web/src/exports/StyleSheet';

  // Maybe you want to turn off compression in dev mode.
  if (config.mode === 'development') {
    // config.devServer.compress = false;
  }

  // Or prevent minimizing the bundle when you build.
  if (config.mode === 'production') {
    config.optimization.minimize = false;

    // https://github.com/expo/expo/issues/4545
    // console.log(config.plugins);
    // config.plugins = config.plugins.filter(
    //   (x) => x.constructor.name !== 'WebpackDeepScopeAnalysisPlugin',
    // );
  }
  module.rules = [rule];
  // Finally return the new config for the CLI to use.
  return config;
};