// the take
A set of standalone Vue 2 demo components backing Akryum's 2019 conference talk on performance optimization techniques: functional components, deferred rendering, keep-alive, static trees, and local-var patterns, each with an on/off toggle so you can see the before/after. It's for Vue developers who want runnable, isolated examples of specific optimizations rather than a library to install.
Each technique is isolated into its own on/off pair of components (e.g. FunctionalOn/FunctionalOff, HideOn/HideOff), so you can diff two files side by side to see exactly what changed instead of hunting through a bigger app. The Benchmark.vue harness gives a consistent way to toggle and time each demo in the browser rather than just reading slides. Covers a decent spread of real Vue 2 perf levers — v-once/static trees, functional components, defer rendering, keep-alive, avoiding reactive local vars — that still explain *why* Vue 2 apps get slow, even if the API surface has moved on.
This is Vue 2 (Options API, the old functional-component syntax, vue-cli/webpack tooling) — several of the techniques shown, like manual functional components, are irrelevant or handled differently in Vue 3's compiler and reactivity system, so applying these patterns verbatim to a modern codebase would be wrong or unnecessary. No pushes since March 2019 and no CI, tests beyond the generated scaffold, or maintenance of any kind, so dependencies (webpack 3-era tooling) are long stale and won't install cleanly against current Node without workarounds. It's a slide companion, not a reusable pattern library — there's no exported utilities or documentation beyond the README setup commands, so you're reading source to extract the idea rather than consuming an API.
We read the README, the directory tree and a key source file in October 2026. Nobody pays to be listed. How we judge →