uppy/website/themes/uppy/layout/stats.ejs

<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>

<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
  <h1><%- page.title %></h1>

  <p class="Stats-infoText">
    To keep Uppy lightweight, we’re aiming to carefully select what packages we include.
    The graph below will help us discover low hanging fruit. Sizes and dependencies shown here
    are for the bundled version of Uppy, which includes all plugins we offer. In production,
    when you <a href="https://github.com/transloadit/uppy#usage">pick and choose just the ones you need</a>, the size will be much smaller:

    <ul>
      <li>Drag & Drop + Multipart uploads ≈ <code>18 Kb mingz</code></li>
      <li>Full-featured Dashboard with image previews and progress indicators + tus resumable uploads ≈ <code>36 Kb mingz</code></li>
    </ul>
  </p>
  <iframe scrolling="no" seamless="seamless" class="Disc" src="/disc.html"></iframe>
  This graph is built with
  <a href="https://twitter.com/hughskennedy">Hugh Kennedy</a>’s excellent
  <a href="http://hughsk.io/disc/">disc</a>.
  <hr />

  <h2>Bundle Sizes</h2>
  <table width="100%">
    <thead>
      <tr>
        <th align="left">Package</th>
        <th align="left">Minified</th>
        <th align="left">Gzip</th>
      </tr>
    </thead>
    <tbody>
      <% for (const [name, sizes] of Object.entries(theme.uppy_bundle_kb_sizes)) { %>
        <% const { minified, gzipped, prettyMinified, prettyGzipped } = sizes %>
        <tr>
          <td><%- name %></td>
          <td class="
            <% if (minified > 50 * 1000) { %>red<% } %>
            <% if (minified < 20 * 1000) { %>green<% } %>
          ">
            <%- prettyMinified %>
          </td>
          <td class="
            <% if (gzipped > 30 * 1000) { %>red<% } %>
            <% if (gzipped < 10 * 1000) { %>green<% } %>
          ">
            <%- prettyGzipped %>
          </td>
        </tr>
      <% } %>
    </tbody>
  </table>

  <h2>Browser support</h2>

  <p>This reflects the current state of Uppy and is updated with every change.</p>

  <a href="https://saucelabs.com/u/transloadit-uppy">
    <img src="https://saucelabs.com/browser-matrix/transloadit-uppy.svg" alt="Sauce Test Status" width="100%">
  </a>

  <div class="footer">Caught a mistake or want to contribute to the documentation?
    <a href="https://github.com/transloadit/uppy/blob/master/website/src/<%- page.source %>" rel="noreferrer noopener" target="_blank">
      Edit/fork this page directly on Github
    </a>!
  </div>
</div>