Custom Build

You may find Swiper bundle size is pretty big(~122.3kb minified, ~31.5kB minified + gzip) that would make your website load slower when including full version of Swiper. But there is a way to reduce bundle file size by using custom build of Swiper that React-id-swiper's already supported fromv2.1.0

Custom build version

You need to use custom build version of React-id-swiper.

import ReactIdSwiper from 'react-id-swiper/lib/ReactIdSwiper.custom';

Then include Swiper and modules you need from

import { Swiper, Navigation, Pagination, Scrollbar } from 'swiper/dist/js/swiper.esm.js';

And your component should look like this


  import React from 'react';
  // For version <=2.3.2
  import { Swiper, Navigation, Pagination } from 'swiper/dist/js/swiper.esm';
  // For version >=2.4.0
  import { Swiper, Navigation, Pagination } from 'swiper/js/swiper.esm';
  import ReactIdSwiperCustom from 'react-id-swiper/lib/ReactIdSwiper.custom';
  const CustomBuildSwiper = () => {
    const params = {
      // Provide Swiper class as props
      Swiper,
      // Add modules you need
      modules: [Navigation, Pagination],
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      spaceBetween: 30
    }
    return(
      <ReactIdSwiperCustom {...params}>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>
      </ReactIdSwiperCustom>
    )
  }
  export default CustomBuildSwiper;

Find more info for custom build fromSwiper documentation

Webpack & Babel config

If you use Webpack & Babel you need to setup Babel loader config inwebpack.config.jslike below


  module: {
    rules: [
      {
        exclude: [/node_modules/(?!(swiper|dom7)/).*/, /.test.js(x)?$/],
        test: /.js(x)?$/,
        use: [{ loader: 'babel-loader' }],
      }
    ],
  }

© 2024 - Asher Nguyen