Swiper: Make swiper smaller in size

[mrtnbroder]

Currently, the minified version is at roughly 70kb for the js and another 13kb for the css, which is significant. I wonder if we could make it smaller by decoupling some of the optional stuff like a11y etc. Currently its coupled with swiper, but making it a optional package and some other files as well, could reduce the size. What do you think?

[ricardobanegas]

+1

[ali-hellani]

+1 :thumbsup:

[wgroenewold]

+1. How about a bower config script or something like the jQuery UI/Modernizr custom site that would let you grab the parts that you needed and compiled the desired JS.

[mrtnbroder]

I'd just provide pre-packaged versions of swiper, or, have each feature available as a plugin. Like:

swiper.js
swiper-plugin-effects.js
swiper-plugin-a11y.js

And in npm you could just require('swiper') and everything else you need via require('swiper/plugins/a11y') etc. so everything would be pretty modular.

[nolimits4web]

which is significant

Seriously? In comparison with what? Also, keep in mind, it is just 20kb gzipped

[nolimits4web]

If 20kb is significant for you in modern apps then go to https://github.com/nolimits4web/Swiper/blob/master/gulpfile.js#L39-L63, comment modules you don't need and do gulp build

[mrtnbroder]

Yes I am serious? It may be only 20kb gzipped but why not offer even leaner builds?
Looks like you already have an option to get rid of some of the unneeded stuff, why not create some more builds?

[patrickcate]

I'd love to see a config tool as well. #perfmatters especially on mobile, and Swiper isn't the only JS and CSS loaded in a app or site. Anything each JS library/tool can do to help devs/designers stay in their performance budget the better.

My preference would be something similar to how Modernizr does things where you can select which features you need and generates a custom build for you. As an alternative having something like you're doing with Framework7 with easy gulp build commands would be a help.

[ascoppa]

Hey Vladimir first of all many thanks for Swiper :)

Is this the minimal set of dependencies ? Notice I commented out some already.

jsFiles: [
'src/js/wrap-start.js',
'src/js/swiper-intro.js',
'src/js/core.js',
//'src/js/effects.js',
//'src/js/lazy-load.js',
//'src/js/scrollbar.js',
'src/js/controller.js',
//'src/js/hashnav.js',
//'src/js/keyboard.js',
//'src/js/mousewheel.js',
//'src/js/parallax.js',
'src/js/plugins.js',
'src/js/emitter.js',
//'src/js/a11y.js',
'src/js/init.js',
'src/js/swiper-outro.js',
'src/js/swiper-proto.js',
'src/js/dom.js',
'src/js/get-dom-lib.js',
'src/js/dom-plugins.js',
'src/js/wrap-end.js',
'src/js/amd.js'
],

Thanks,
Alfredo

[dogoku]

I don't know when it was added, but swiper does have a custom build command, similar to framework7.

Just run gulp custom for core, or gulp custom -module1,module2 to add additional modules

It generates a custom directory in the repo and contains both js and css custom files. 👍

[adardesign]

Even the minimum dependencies is still too large.
has anything changed?
Are there anything that can be taken out given if legacy browsers don't need to be supported?

[cogtail]

Swiper is actually the best slider for my projects. My custom build JavaScript currently has 65K (minified, uncompressed). But I agree, even the minimum dependencies are still a little too large.

[rodrigodagostino]

I'm really looking forward for a solution to this problem. I'd love to be able to reduce the size of the package.

So +1

[ggedde]

Swiper is so far the smoothest and least buggy slider that I have used.
Thanks @nolimits4web and the rest of the swiper team.

However, it is also the largest import that I have in my project and I only use if for a simple image slider and some times content slider. So I don't use many of the additional features like (a11y, parallax, lazy-load, mousewheel, keyboard, etc).

it would be nice is there was a lighter version or a way to add on the heavier items when needed.

+1

[antidote2]

Please have a look at my bundle report for angular 8 application. This just does not fill right. Now the minified version takes 126kb!

Thanks for the library - it's great!

[nvuhung]

Please have a look at my bundle report for angular 8 application. This just does not fill right. Now the minified version takes 126kb!

Thanks for the library - it's great!

I am working on React and swiper also take 126kb, this is the heaviest library in my project :(

[nvuhung]

Please have a look at my bundle report for angular 8 application. This just does not fill right. Now the minified version takes 126kb!

Thanks for the library - it's great!

I am working on React and swiper also take 126kb, this is the heaviest library in my project :(

[nolimits4web]

http://idangero.us/swiper/api/#custom-build