SwiperJS太重啦！换个轻量级的！

2023-11-16 15:46:04 浏览数 (1)

前言

轮播图功能在我们日常开发中常见。秉持着“有轮子，就不用造”的原则，我们大概率会使用轮子，而且找的都是非常优秀的轮子。其中，大名鼎鼎的SwiperJS就是其中之一。

必须承认：SwiperJS 是一个功能丰富的轮播库，且有着优秀的交互效果。当今天的主角不是它。

我们在开发实践中，只用到了SwiperJS的几个功能。大家知道SwiperJS包有多大吗？SwiperJS 的 minimum 版本文件达到了 140kb，采用gzip压缩后也有 35kb。如果只是简单的几个功能，使用 SwiperJS 就显得大材小用了。

如果使用 SwiperJS 的 ES module 版本，我们还需要调整构建配置或者 Polyfill。当未使用构建工具时，我们不得不引入整个 SwiperJS。试想一下，在大多数情况下，简单的页面或者 mobile 端的轮播效果都只用其核心功能实现且不需要引入额外插件。

如果你也和我一样有上述需求时，那么Tiny-Swiper或许是更好的选择。

Tiny-Swiper简介和优势

Tiny-Swiper是一个轻量，兼容IE7、IE8，3D、支持移动端的轮播图插件库。它支持丰富的插件，能按需导入，提供原生般的用户体验。

Tiny-Swiper 最大的优势就在Tiny上，核心库压缩后仅4kb。同时，它兼容SwiperJS API。你会用SwiperJS，就会用Tiny-Swiper，上手难度几乎为零。

此外，Tiny-Swiper还有个比较方便的特点，就是用例覆盖。你可以先到官网看下它提供的Demos。只要符合你的要求，就可以直接用。

安装和使用

我们可以从 CDN 引入 js 文件。

代码语言：javascript复制
<script src="https://unpkg.com/tiny-swiper@latest"></script>

或者可以使用 npm 或 yarn 来进行安装。

代码语言：javascript复制
npm install tiny-swiper --save
// or
yarn add tiny-swiper

在使用上，几乎和SwiperJS没啥差别！先是页面HTML标签元素。

代码语言：javascript复制
<!-- 轮播容器 -->
<div class="swiper-container">
    <!-- 定义一个 wrapper -->
    <div class="swiper-wrapper">
        <!-- 需要切换的幻灯片 -->
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
    </div>
    <!-- 如果需要分页 -->
    <div class="swiper-pagination"></div>
</div>

接着是初始化使用。只需更改 import 语句就能将 SwiperJS 替换为Tiny-Swiper即可。

代码语言：javascript复制
import Swiper from 'tiny-swiper'

const swiper = new Swiper('#swiper');

初始化的时候，有默认的配置参数。当然也可以自定义。来看看默认配置下的效果图。

引入插件

我们再试试使用图片懒加载插件。

代码语言：javascript复制
import Swiper from 'tiny-swiper'
import SwiperPluginLazyload from 'tiny-swiper/lib/modules/lazyload.min.js'

const mySwiper = new Swiper('#swiper', {
    Plugins: [ SwiperPluginLazyload ],
    lazyload: {
        loadPrevNext: false,
        loadPrevNextAmount: 1,
        loadOnTransitionStart: false,
        elementClass: 'swiper-lazy',
        loadingClass: 'swiper-lazy-loading',
        loadedClass: 'swiper-lazy-loaded',
        preloaderClass: 'swiper-lazy-preloader'
    }
})

这里我只包懒加载的功能应用到HTML元素中容器id为"swiper"的实例上。当然，我们也可以全局使用。

代码语言：javascript复制
Swiper.use([ SwiperPluginLazyload ])

小结

Tiny-Swiper 现在已经来到2.2的版本了。整体性能都不错。个人觉得这是一个小而精的轮播图工具库。详情内容请查询官方链接。

官方地址：https://tiny-swiper.js.org/

容器 插件 开发 配置 压缩

0 人点赞