(perf): dynamically import swiper to reduce client bundle size

reactioncommerce · Aug 7, 2018 · cbe5f68 · cbe5f68
1 parent 6e277f2
commit cbe5f68
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/imports/plugins/core/checkout/client/templates/cartDrawer/cartDrawer.js b/imports/plugins/core/checkout/client/templates/cartDrawer/cartDrawer.js
@@ -1,5 +1,5 @@
-import Swiper from "swiper";
 import { Components } from "@reactioncommerce/reaction-components";
+import Logger from "@reactioncommerce/logger";
 import { $ } from "meteor/jquery";
 import { Session } from "meteor/session";
 import { Template } from "meteor/templating";
@@ -48,18 +48,26 @@ Template.openCartDrawer.onRendered(() => {
 
   $("#cart-drawer-container").fadeIn(() => {
     if (!swiper) {
-      swiper = new Swiper(".cart-drawer-swiper-container", {
-        direction: "horizontal",
-        setWrapperSize: true,
-        loop: false,
-        grabCursor: true,
-        slidesPerView: "auto",
-        wrapperClass: "cart-drawer-swiper-wrapper",
-        slideClass: "cart-drawer-swiper-slide",
-        slideActiveClass: "cart-drawer-swiper-slide-active",
-        pagination: ".cart-drawer-pagination",
-        paginationClickable: true
-      });
+      import("swiper")
+        .then((module) => {
+          const Swiper = module.default;
+          swiper = new Swiper(".cart-drawer-swiper-container", {
+            direction: "horizontal",
+            setWrapperSize: true,
+            loop: false,
+            grabCursor: true,
+            slidesPerView: "auto",
+            wrapperClass: "cart-drawer-swiper-wrapper",
+            slideClass: "cart-drawer-swiper-slide",
+            slideActiveClass: "cart-drawer-swiper-slide-active",
+            pagination: ".cart-drawer-pagination",
+            paginationClickable: true
+          });
+          return swiper;
+        })
+        .catch((error) => {
+          Logger.error(error.message, "Unable to load Swiper module");
+        });
     }
   });
 });