<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Content</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#3-key-design-decisions">3 Key design decisions</a>
<ol>
<li><a href="#1-use-of-native-esm">Use of Native ESM</a></li>
<li><a href="#2-rethinking-recompilation">Rethinking Recompilation</a></li>
<li><a href="#3-pre-bundling">Pre-bundling</a></li>
</ol>
</li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Introduction</h2>
<p>If you used webpack or rollup on large projects then you probably know the struggle of having the long build times between each change.</p>
<p>This was one of the pain points that the Evan You thought about addressing when he created Vite.</p>
<p>He took a look at the existing solutions, and thought of ways to iterate on the design.</p>
<p><strong>These new ideas were made possible because of:</strong></p>
<ul>
<li>
<p><strong>Better tooling</strong> (<code class="language-">esbuild
</code>, <code class="language-">swc
</code>)</p>
</li>
<li>
<p><strong>Native ESM support</strong> (on browsers)</p>
</li>
</ul>
<p>with these new changes, he had a vision of a new tool (Vite) which achieves:</p>
<ul>
<li>
<p><strong>Faster build times</strong> - Keeping build times constant that scales with codebase size</p>
</li>
<li>
<p><strong>Better Developer Experience (DX)</strong> - Building a tool from the ground up to improve DX — faster feedback cycle, overall experience, and extensibility</p>
</li>
<li>
<p><strong>A more integrated Server-side rendering experience</strong> - Providing a more integrated experience, tooling for server-side rendering, and solving pain points like having multiple configuration files</p>
</li>
</ul>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/bundle-size-build-time-comparison.png" alt="build time vs codebase size comparison between bundling tools" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Buld time vs Codebase size</i></blockquote>
  </div>
</div>
<p>From a technical standpoint, there were 3 key design decisions that made it possible for Vite to achieve these optimization goals.</p>
<p>Let’s go through them one by one.</p>
<h2 id="3-key-design-decisions"><a href="#3-key-design-decisions" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>3 Key design decisions</h2>
<p>When webpack was introduced, it was the best tool at that time.</p>
<p>Then rollup came on the scene, it was a new bundler with a focus on simplicity.</p>
<p>Both of these tools took a very similar approach to bundling — which is, when the files changed, it rebuilt the whole bundle.</p>
<p>This means that as your codebase grows, the build times would grow linearly with this increase.</p>
<p>This leads to question of why can’t we just rebuild the files that has changed (and not the whole bundle) ?</p>
<p>And that’s the exact approach that Evan took when designing Vite.</p>
<p>All of these decisions were made possible because modern browsers now support native ESM.</p>
<p>Let’s go through these 3 key design decisions.</p>
<h3 id="1-use-of-native-esm"><a href="#1-use-of-native-esm" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>1. Use of Native ESM</h3>
<p>The first decision makes all the other decisions possible, and that was the decision to use native ESM.</p>
<p>In doing so, Vite can now delegate handling of the module system to the browser, and just handle the processing (transpilation, transforming etc) of the requested modules.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/vite-on-demand-modules-and-all-at-once.png" alt="Vite: on-demand vs all at once bundling" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Vite: prebundling dependencies and caching in filesystem</i></blockquote>
  </div>
</div>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/vite-native-esm.png" alt="Vite: Native ESM Syntax" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i> Example using native ESM syntax</i></blockquote>
  </div>
</div>
<p>With this small change, it actually allows Vite to also rethink how recompilation works in the development environment.</p>
<h3 id="2-rethinking-recompilation"><a href="#2-rethinking-recompilation" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>2. Rethinking Recompilation</h3>
<p>With the use of native ESM, Evan can now rethink how the build lifecycle works.</p>
<p>One of those ideas is to actually separate the <strong>source code</strong> and <strong>dependencies</strong>.</p>
<p>This was actually one of the main bottleneck in bundlers like webpack and rollup.</p>
<p>Separating the two, allows Evan to re-design the builds to better suit the lifecycle of each of these use cases independently.</p>
<p><strong>The use case are:</strong></p>
<ul>
<li>
<p><strong>Source code</strong> - Changes frequently</p>
</li>
<li>
<p><strong>Dependencies</strong> - Changes less frequently</p>
</li>
</ul>
<p>When changes occur, instead of rebuilding the whole bundle each time, Vite will just serve the modules on-demand.</p>
<p>This is done by leveraging the Vite middleware, and the native ESM on browsers which leads to better overall performance.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/vite-the-ideal-process.png" alt="Comparison of the typical to ideal bundling process" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Comparison of typical to ideal bundling process</i></blockquote>
  </div>
</div>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/vite-serving-modules-on-demand.png" alt="Vite: Serving modules on demand" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Vite: An illustration of the process of serving modules on demand</i></blockquote>
  </div>
</div>
<p>Now, in this section, we only talked about the recompilation.</p>
<p>What about the dependencies ? How does Vite handle that part ?</p>
<p>That’s where prebundling comes in.</p>
<h3 id="3-pre-bundling"><a href="#3-pre-bundling" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>3. Pre-bundling</h3>
<p>To further optimize the build process, Vite will prebundle the dependencies in your project.</p>
<p>It does this by crawling the source code, and figuring out which dependencies needed to be prebundled, then run them through <strong>esbuild</strong>.</p>
<p>The outputs are cached in the filesystem based the lockfiles, and they will be invalidated as needed.</p>
<p>So, that means no more rebuilding on every change!</p>
<p>Other than prebundling dependencies, Vite also performs the following optimization in the process:</p>
<ul>
<li>
<p><strong>Conversion to Native ESM</strong> - Vite will convert the modules using CommonJS or UMD into native ESM</p>
</li>
<li>
<p><strong>Optimizing performance</strong> - Vite will concat modules to prevent waterfall requests when using native ESM (ie <code class="language-">lodash-es
</code>)</p>
</li>
</ul>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/vite-prebundling.png" alt="Vite: prebundling" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Vite: prebundling dependencies and caching in filesystem</i></blockquote>
  </div>
</div>
<h2 id="conclusion"><a href="#conclusion" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Conclusion</h2>
<p>So, to recap, there are 3 key decisions made by Evan You (Creator of Vite) that allows for the overall performance improvements in the build times as your codebase size increases.</p>
<p>They are:</p>
<ul>
<li>
<p><strong>Use of Native ESM</strong> - Module systems are now natively supported on browsers, going from building everything at once to serving bundles on-demand</p>
</li>
<li>
<p><strong>Rethinking Recompilation</strong> - Separating the source code and dependencies, and optimizing the build for these two sources independently</p>
</li>
<li>
<p><strong>Pre-bundling</strong> - Dependencies are pre-bundled using esbuild then cached on the filesystem, the dependencies are only invalidated whenever the lockfile changes</p>
</li>
</ul>
<p>And that its! I hope you learned something new!</p>
<p>If you found this helpful or learned something new, please share this article with a friend or co-worker 🙏❤️! (Thanks!)</p>


3 key design decisions to achieve constant build times

Jerry Chang

Go Back

Vite: How It Achieves Constant Time Builds

Enjoy the content ?