-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
53 changed files
with
179 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <!doctype html> | ||
| <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-advanced/bundleSizes" data-has-hydrated="false"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="generator" content="Docusaurus v3.6.3"> | ||
| <title data-rh="true">Reducing Bundle Sizes | react-country-region-selector</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://country-regions.github.io/react-country-region-selector/advanced/bundleSizes"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Reducing Bundle Sizes | react-country-region-selector"><meta data-rh="true" name="description" content="This package clocks at around 72KB, minified. This relatively large size is because of the data set. Cramming in all the country and region names from"><meta data-rh="true" property="og:description" content="This package clocks at around 72KB, minified. This relatively large size is because of the data set. Cramming in all the country and region names from"><link data-rh="true" rel="canonical" href="https://country-regions.github.io/react-country-region-selector/advanced/bundleSizes"><link data-rh="true" rel="alternate" href="https://country-regions.github.io/react-country-region-selector/advanced/bundleSizes" hreflang="en"><link data-rh="true" rel="alternate" href="https://country-regions.github.io/react-country-region-selector/advanced/bundleSizes" hreflang="x-default"><link rel="stylesheet" href="/react-country-region-selector/assets/css/styles.0206ac5b.css"> | ||
| <script src="/react-country-region-selector/assets/js/runtime~main.01046327.js" defer="defer"></script> | ||
| <script src="/react-country-region-selector/assets/js/main.b8fc9dd4.js" defer="defer"></script> | ||
| </head> | ||
| <body class="navigation-with-keyboard"> | ||
| <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_yUjn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/react-country-region-selector/"><b class="navbar__title text--truncate">react-country-region-selector</b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/country-regions/react-country-region-selector" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_tiFO"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_RgB1 colorModeToggle_A6Ha"><button class="clean-btn toggleButton_fNjk toggleButtonDisabled_IvQI" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_nkEg"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_otmv"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Rqew"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_JLGd"><div class="docsWrapper_tUnl"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_KrGz" type="button"></button><div class="docRoot_m_qk"><aside class="theme-doc-sidebar-container docSidebarContainer_olnO"><div class="sidebarViewport_Pr0l"><div class="sidebar_Xv5G"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_aeCb"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/react-country-region-selector/">Docs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/react-country-region-selector/props">Props</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/react-country-region-selector/styling">Styling</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/react-country-region-selector/demos/">Demos</a><button aria-label="Expand sidebar category 'Demos'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/react-country-region-selector/advanced/">Advanced</a><button aria-label="Collapse sidebar category 'Advanced'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-country-region-selector/advanced/performance">Performance</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/react-country-region-selector/advanced/bundleSizes">Reducing Bundle Sizes</a></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_jAdm"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_qHb7"><div class="docItemContainer_Jbts"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_gNm1" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/react-country-region-selector/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_kD6e"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/react-country-region-selector/advanced/"><span itemprop="name">Advanced</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Reducing Bundle Sizes</span><meta itemprop="position" content="2"></li></ul></nav><div class="theme-doc-markdown markdown"><header><h1>Reducing Bundle Sizes</h1></header><p>This package clocks at around <code>72KB</code>, minified. This relatively large size is because of the <em>data set</em>. Cramming in all the country and region names from | ||
| <a href="https://github.com/country-regions/country-region-data" target="_blank" rel="noopener noreferrer">country-region-data</a> takes up space. We've converted the raw data in the <code>react-country-region-selector</code> | ||
| bundle to reduce the size as much as possible.</p> | ||
| <p>If bundle sizes are a concern, I'd first suggest <strong>lazy-loading the component</strong> so it only downloads the code when needed instead of bloating your main | ||
| bundle. See whatever bundler doc you use for further information on that. This is probably the simplest approach and will require the least work down the road.</p> | ||
| <p>Alternatively, if you don't need all the data and want to show a subset of all countries (like on this | ||
| <a href="/react-country-region-selector/demos/features/CountryWhitelist">Country Whitelist demo</a>), you can do a manual build of this script and create a smaller.</p> | ||
| <p>Here's how it works. First, get the repo up and running locally from the notes in the <a href="https://github.com/country-regions/react-country-region-selector/blob/master/DEVELOPER.md" target="_blank" rel="noopener noreferrer">Developer Doc</a>. | ||
| Then locally, do the following:</p> | ||
| <ol> | ||
| <li>On the command line, navigate to <code>packages/react-country-region-selector</code>.</li> | ||
| <li>Run the following command, passing in the list of countries you want to include: | ||
| <code>npm run minify-data --config-countries=CA,US,GB</code> | ||
| <ul> | ||
| <li>To find the list of country shortcodes, see the raw data in <a href="https://github.com/country-regions/country-region-data/blob/master/data.json" target="_blank" rel="noopener noreferrer">country-region-data</a> (<code>countryShortCode</code>).</li> | ||
| </ul> | ||
| </li> | ||
| <li>Run <code>npm run build</code></li> | ||
| </ol> | ||
| <p>This will have generated a fresh <code>/dist</code> folder in that package. You can then copy + paste those contents into your own repo for usage.</p> | ||
| <p>Ideal? No. You'd need to do this manual process every time the package is updated, or find a way to automate it. But the command above that limits the data | ||
| to 3 countries reduces the total bundle size to <code>8KB</code>. Quite the savings!</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/react-country-region-selector/advanced/performance"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Performance</div></a></nav></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"></div></footer></div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.