Mdx-deck: Suggestions for performance with many slides

[trevordmiller]

My team runs a week long training for newly hired developers. We recently moved our slide deck for this training from slides.com to mdx-deck. We have really enjoyed having everything in markdown and git history, thank you! However, with hundreds of slides, we have experienced significant lag when moving between slides with left/right arrows, option + o to jump between slides etc. Are there any suggestions for how we could improve the performance of mdx-deck when using many slides? Here is our setup:

Relevant scripts in package.json:

    "dev": "mdx-deck src/index.js",
    "html": "mdx-deck build src/index.js -d dist --no-html",

src/index.js:

export { default as theme } from "./utils/theme";

//Import all the things
import Intro from "./slides/intro.mdx";
import FinalProject from "./slides/FinalProject.mdx";

//Part One Modern JavaScript
import ESModules from "./slides/part1ModernJS/ESModules.mdx";
import ArrowFunctions from "./slides/part1ModernJS/ArrowFunctions.mdx";
import ArrayMethods from "./slides/part1ModernJS/ArrayMethods.mdx";
import TemplateLiterals from "./slides/part1ModernJS/TemplateLiterals.mdx";
import DefaultParameters from "./slides/part1ModernJS/DefaultParameters.mdx";
import DestructuringAssignment from "./slides/part1ModernJS/DestructuringAssignment.mdx";
import SpreadAndRest from "./slides/part1ModernJS/SpreadAndRest.mdx";
import Promises from "./slides/part1ModernJS/Promises.mdx";
import Fetch from "./slides/part1ModernJS/Fetch.mdx";
import Classes from "./slides/part1ModernJS/Classes.mdx";
import TheFuture from "./slides/part1ModernJS/TheFuture.mdx";

//Part Two ReactJS
import WhatIsReact from "./slides/part2ReactJS/WhatIsReact.mdx";
import ThinkingInComponents from "./slides/part2ReactJS/ThinkingInComponents.mdx";
import JSX from "./slides/part2ReactJS/JSX.mdx";
import Components from "./slides/part2ReactJS/Components.mdx";
import Styling from "./slides/part2ReactJS/Styling.mdx";
import UiEvents from "./slides/part2ReactJS/UIEvents.mdx";
import ComponentsWithState from "./slides/part2ReactJS/ComponentsWithState.mdx";
import LifeCycleEvents from "./slides/part2ReactJS/LifeCycleEvents.mdx";
import FormsInReact from "./slides/part2ReactJS/FormsInReact.mdx";
import InteractingWithTheDOM from "./slides/part2ReactJS/InteractingWithTheDOM.mdx";
import SharingState from "./slides/part2ReactJS/SharingState.mdx";
import RenderProps from "./slides/part2ReactJS/RenderProps.mdx";
import RenderingNull from "./slides/part2ReactJS/RenderingNull.mdx";
import HigherOrderComponents from "./slides/part2ReactJS/HigherOrderComponents.mdx";
import Composition from "./slides/part2ReactJS/Composition.mdx";

// Part Three Next.js
import WhatIsNext from "./slides/part3NextJS/WhatIsNext.mdx";
import Pages from "./slides/part3NextJS/Pages.mdx";
import InitialProps from "./slides/part3NextJS/InitialProps.mdx";
import StaticAssets from "./slides/part3NextJS/StaticAssets.mdx";
import Shipping from "./slides/part3NextJS/Shipping.mdx";

//Order the slides
export default [
  //Part One Modern JavaScript
  ...Intro,
  ...ESModules,
  ...ArrowFunctions,
  ...ArrayMethods,
  ...TemplateLiterals,
  ...DefaultParameters,
  ...DestructuringAssignment,
  ...SpreadAndRest,
  ...Promises,
  ...Fetch,
  ...Classes,
  ...TheFuture,

  //Part Two ReactJS
  ...WhatIsReact,
  ...ThinkingInComponents,
  ...JSX,
  ...Components,
  ...Styling,
  ...UiEvents,
  ...ComponentsWithState,
  ...LifeCycleEvents,
  ...FormsInReact,
  ...InteractingWithTheDOM,
  ...SharingState,
  ...RenderProps,
  ...RenderingNull,
  ...HigherOrderComponents,
  ...Composition,

  // Part Three Next.js
  ...WhatIsNext,
  ...Pages,
  ...InitialProps,
  ...StaticAssets,
  ...Shipping,

  // Final project
  ...FinalProject
];

[jxnblk]

That's a lot of slides! For the current v1, I'm not sure if there's any good way to avoid this other than splitting it up into more than one slide deck. For v2, I'm considering using @reach/router which should only render one slide at a time and probably avoid this issue

[trevordmiller]

@jxnblk Yep, it's a week's worth of slides 😂 Yeah that is totally understandable, thank you for the information! We'll look forward to upgrading to v2 and will probably split up the decks for now :) Thanks again for the great library!

[jxnblk]

Of course! If I’d known this was going to be such a popular repo, I probably would’ve spent some more time thinking through stuff like this for v1 :)