mirror of https://github.com/ColorlibHQ/gentelella
462 lines
19 KiB
HTML
462 lines
19 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
|
|
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css">
|
|
|
|
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">
|
|
|
|
<style id="jtd-nav-activation">
|
|
|
|
|
|
|
|
.site-nav > ul.nav-list:first-child > li:not(:nth-child(8)) > a,
|
|
.site-nav > ul.nav-list:first-child > li > ul > li a {
|
|
background-image: none;
|
|
}
|
|
|
|
.site-nav > ul.nav-list:not(:first-child) a,
|
|
.site-nav li.external a {
|
|
background-image: none;
|
|
}
|
|
|
|
.site-nav > ul.nav-list:first-child > li:nth-child(8) > a {
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}.site-nav > ul.nav-list:first-child > li:nth-child(8) > button svg {
|
|
transform: rotate(-90deg);
|
|
}.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(8) > ul.nav-list {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="/gentelella/assets/js/vendor/lunr.min.js"></script>
|
|
|
|
|
|
<script src="/gentelella/assets/js/just-the-docs.js"></script>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
|
|
<link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">
|
|
|
|
|
|
|
|
<!-- Begin Jekyll SEO tag v2.8.0 -->
|
|
<title>Bundle Analysis Guide | Gentelella Admin Template</title>
|
|
<meta name="generator" content="Jekyll v3.10.0" />
|
|
<meta property="og:title" content="Bundle Analysis Guide" />
|
|
<meta property="og:locale" content="en_US" />
|
|
<meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
|
|
<meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
|
|
<link rel="canonical" href="https://puikinsh.github.io/gentelella/bundle-analysis/" />
|
|
<meta property="og:url" content="https://puikinsh.github.io/gentelella/bundle-analysis/" />
|
|
<meta property="og:site_name" content="Gentelella Admin Template" />
|
|
<meta property="og:image" content="https://puikinsh.github.io/gentelella/assets/images/gentelella-preview.jpg" />
|
|
<meta property="og:type" content="website" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:image" content="https://puikinsh.github.io/gentelella/assets/images/gentelella-preview.jpg" />
|
|
<meta property="twitter:title" content="Bundle Analysis Guide" />
|
|
<script type="application/ld+json">
|
|
{"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Bundle Analysis Guide","image":"https://puikinsh.github.io/gentelella/assets/images/gentelella-preview.jpg","url":"https://puikinsh.github.io/gentelella/bundle-analysis/"}</script>
|
|
<!-- End Jekyll SEO tag -->
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<a class="skip-to-main" href="#main-content">Skip to main content</a>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
|
<symbol id="svg-link" viewBox="0 0 24 24">
|
|
<title>Link</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|
</svg>
|
|
</symbol>
|
|
|
|
<symbol id="svg-menu" viewBox="0 0 24 24">
|
|
<title>Menu</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</symbol>
|
|
|
|
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
|
<title>Expand</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</symbol>
|
|
|
|
<!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
|
|
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
|
|
<title id="svg-external-link-title">(external link)</title>
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</symbol>
|
|
|
|
|
|
<symbol id="svg-doc" viewBox="0 0 24 24">
|
|
<title>Document</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
|
|
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
|
|
</svg>
|
|
</symbol>
|
|
|
|
<symbol id="svg-search" viewBox="0 0 24 24">
|
|
<title>Search</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
|
|
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
</symbol>
|
|
|
|
|
|
|
|
<!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
|
|
<symbol id="svg-copy" viewBox="0 0 16 16">
|
|
<title>Copy</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
|
|
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
|
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-copied" viewBox="0 0 16 16">
|
|
<title>Copied</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
|
|
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
|
|
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
|
|
</svg>
|
|
</symbol>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<div class="side-bar">
|
|
<div class="site-header" role="banner">
|
|
<a href="/gentelella/" class="site-title lh-tight">
|
|
Gentelella Admin Template
|
|
|
|
</a>
|
|
<button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
|
|
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav aria-label="Main" id="site-nav" class="site-nav">
|
|
|
|
|
|
<ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li><li class="nav-list-item"><a href="/gentelella/bundle-analysis/" class="nav-list-link">Bundle Analysis Guide</a></li><li class="nav-list-item"><a href="/gentelella/jquery-elimination-complete/" class="nav-list-link">Complete jQuery Elimination Achievement 🎉</a></li><li class="nav-list-item"><a href="/gentelella/daterangepicker-fix/" class="nav-list-link">Date Range Picker Fix Documentation</a></li><li class="nav-list-item"><a href="/gentelella/security-headers/" class="nav-list-link">Security Headers Implementation Guide</a></li></ul>
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<footer class="site-footer">
|
|
This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="main" id="top">
|
|
<div id="main-header" class="main-header">
|
|
|
|
|
|
|
|
<div class="search" role="search">
|
|
<div class="search-input-wrap">
|
|
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off">
|
|
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
|
|
</div>
|
|
<div id="search-results" class="search-results"></div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<nav aria-label="Auxiliary" class="aux-nav">
|
|
<ul class="aux-nav-list">
|
|
|
|
<li class="aux-nav-list-item">
|
|
<a href="//github.com/puikinsh/gentelella" class="site-button"
|
|
|
|
>
|
|
Gentelella on GitHub
|
|
</a>
|
|
</li>
|
|
|
|
<li class="aux-nav-list-item">
|
|
<a href="//colorlib.com" class="site-button"
|
|
|
|
>
|
|
Colorlib
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="main-content-wrap">
|
|
|
|
<div id="main-content" class="main-content">
|
|
<main>
|
|
|
|
<h1 id="bundle-analysis-guide">
|
|
|
|
|
|
<a href="#bundle-analysis-guide" class="anchor-heading" aria-labelledby="bundle-analysis-guide"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bundle Analysis Guide
|
|
|
|
|
|
</h1>
|
|
|
|
|
|
<p>This guide explains how to use the bundle analyzer to monitor and optimize the bundle size of the Gentelella admin template.</p>
|
|
<h2 id="quick-start">
|
|
|
|
|
|
<a href="#quick-start" class="anchor-heading" aria-labelledby="quick-start"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Quick Start
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Build and generate bundle analysis</span>
|
|
npm run analyze
|
|
|
|
<span class="c"># Build without opening the stats file (for CI)</span>
|
|
npm run analyze:ci
|
|
</code></pre></div></div>
|
|
<h2 id="analysis-file-location">
|
|
|
|
|
|
<a href="#analysis-file-location" class="anchor-heading" aria-labelledby="analysis-file-location"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Analysis File Location
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<p>After running the build, the bundle analysis is saved to:</p>
|
|
<ul>
|
|
<li><code class="language-plaintext highlighter-rouge">dist/stats.html</code> - Interactive treemap visualization</li>
|
|
</ul>
|
|
<h2 id="understanding-the-analysis">
|
|
|
|
|
|
<a href="#understanding-the-analysis" class="anchor-heading" aria-labelledby="understanding-the-analysis"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Understanding the Analysis
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="treemap-view">
|
|
|
|
|
|
<a href="#treemap-view" class="anchor-heading" aria-labelledby="treemap-view"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Treemap View
|
|
|
|
|
|
</h3>
|
|
|
|
<p>The default treemap view shows:</p>
|
|
<ul>
|
|
<li><strong>Size of boxes</strong> = Bundle size (larger boxes = larger bundles)</li>
|
|
<li><strong>Colors</strong> = Different modules and dependencies</li>
|
|
<li><strong>Nested structure</strong> = Module hierarchy and dependencies</li>
|
|
</ul>
|
|
<h3 id="key-metrics-to-monitor">
|
|
|
|
|
|
<a href="#key-metrics-to-monitor" class="anchor-heading" aria-labelledby="key-metrics-to-monitor"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Key Metrics to Monitor
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<ol>
|
|
<li><strong>Vendor Chunks</strong> (largest bundles):
|
|
<ul>
|
|
<li><code class="language-plaintext highlighter-rouge">vendor-charts</code> (~1.4MB) - Chart.js, ECharts, Leaflet</li>
|
|
<li><code class="language-plaintext highlighter-rouge">vendor-core</code> (~168KB) - jQuery, Bootstrap, Popper.js</li>
|
|
<li><code class="language-plaintext highlighter-rouge">vendor-forms</code> (~128KB) - Select2, Date pickers, Sliders</li>
|
|
<li><code class="language-plaintext highlighter-rouge">vendor-ui</code> (~100KB) - jQuery UI, DataTables</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Application Code</strong>:
|
|
<ul>
|
|
<li><code class="language-plaintext highlighter-rouge">init</code> (~54KB) - Main initialization code</li>
|
|
<li>Page-specific bundles (2-3KB each)</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>CSS Bundles</strong>:
|
|
<ul>
|
|
<li><code class="language-plaintext highlighter-rouge">init.css</code> (~510KB) - Main stylesheet bundle</li>
|
|
<li>Page-specific CSS (4-67KB each)</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
<h2 id="optimization-strategies">
|
|
|
|
|
|
<a href="#optimization-strategies" class="anchor-heading" aria-labelledby="optimization-strategies"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Optimization Strategies
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="1-identify-large-dependencies">
|
|
|
|
|
|
<a href="#1-identify-large-dependencies" class="anchor-heading" aria-labelledby="1-identify-large-dependencies"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 1. Identify Large Dependencies
|
|
|
|
|
|
</h3>
|
|
|
|
<ul>
|
|
<li>Look for unexpectedly large vendor chunks</li>
|
|
<li>Check if dependencies are being tree-shaken properly</li>
|
|
<li>Consider lighter alternatives for heavy libraries</li>
|
|
</ul>
|
|
<h3 id="2-monitor-bundle-growth">
|
|
|
|
|
|
<a href="#2-monitor-bundle-growth" class="anchor-heading" aria-labelledby="2-monitor-bundle-growth"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 2. Monitor Bundle Growth
|
|
|
|
|
|
</h3>
|
|
|
|
<ul>
|
|
<li>Track changes in bundle sizes over time</li>
|
|
<li>Set up alerts for significant size increases</li>
|
|
<li>Use gzip/brotli compressed sizes for realistic network transfer sizes</li>
|
|
</ul>
|
|
<h3 id="3-code-splitting-optimization">
|
|
|
|
|
|
<a href="#3-code-splitting-optimization" class="anchor-heading" aria-labelledby="3-code-splitting-optimization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 3. Code Splitting Optimization
|
|
|
|
|
|
</h3>
|
|
|
|
<p>Current manual chunks are optimized for:</p>
|
|
<ul>
|
|
<li><strong>vendor-core</strong>: Essential libraries loaded on every page</li>
|
|
<li><strong>vendor-charts</strong>: Chart functionality (loaded only on chart pages)</li>
|
|
<li><strong>vendor-forms</strong>: Form enhancements (loaded only on form pages)</li>
|
|
<li><strong>vendor-ui</strong>: UI components (loaded as needed)/</li>
|
|
</ul>
|
|
<h3 id="4-dynamic-import-opportunities">
|
|
|
|
|
|
<a href="#4-dynamic-import-opportunities" class="anchor-heading" aria-labelledby="4-dynamic-import-opportunities"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 4. Dynamic Import Opportunities
|
|
|
|
|
|
</h3>
|
|
|
|
<p>Consider converting large features to dynamic imports:</p>
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Instead of static import</span>
|
|
<span class="k">import</span> <span class="p">{</span> <span class="nx">Chart</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">chart.js</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="c1">// Use dynamic import for conditional loading</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.chart-container</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="kd">const</span> <span class="p">{</span> <span class="nx">Chart</span> <span class="p">}</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">chart.js</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div></div>
|
|
<h2 id="performance-targets">
|
|
|
|
|
|
<a href="#performance-targets" class="anchor-heading" aria-labelledby="performance-targets"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Performance Targets
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="current-performance-as-of-latest-build">
|
|
|
|
|
|
<a href="#current-performance-as-of-latest-build" class="anchor-heading" aria-labelledby="current-performance-as-of-latest-build"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Current Performance (as of latest build):
|
|
|
|
|
|
</h3>
|
|
|
|
<ul>
|
|
<li><strong>JavaScript Total</strong>: ~2.4MB uncompressed, ~800KB gzipped</li>
|
|
<li><strong>CSS Total</strong>: ~610KB uncompressed, ~110KB gzipped</li>
|
|
<li><strong>Page Load Impact</strong>: Core bundle (168KB) loads on every page</li>
|
|
</ul>
|
|
<h3 id="recommended-targets">
|
|
|
|
|
|
<a href="#recommended-targets" class="anchor-heading" aria-labelledby="recommended-targets"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Recommended Targets:
|
|
|
|
|
|
</h3>
|
|
|
|
<ul>
|
|
<li><strong>Core Bundle</strong>: <200KB (currently 168KB ✅)</li>
|
|
<li><strong>Feature Bundles</strong>: <150KB each (charts: 1.4MB ❌)</li>
|
|
<li><strong>Total Initial Load</strong>: <300KB gzipped (currently ~150KB ✅)</li>
|
|
</ul>
|
|
<h2 id="bundle-size-warnings">
|
|
|
|
|
|
<a href="#bundle-size-warnings" class="anchor-heading" aria-labelledby="bundle-size-warnings"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bundle Size Warnings
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<p>The build process will warn about chunks larger than 1000KB:</p>
|
|
<ul>
|
|
<li>This is currently triggered by the <code class="language-plaintext highlighter-rouge">vendor-charts</code> bundle</li>
|
|
<li>Consider splitting chart libraries further or using dynamic imports</li>
|
|
<li>Adjust the warning limit in <code class="language-plaintext highlighter-rouge">vite.config.js</code> if needed</li>
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
<hr>
|
|
<footer>
|
|
|
|
<p><a href="#top" id="back-to-top">Back to top</a></p>
|
|
|
|
|
|
<p class="text-small text-grey-dk-100 mb-0">Copyright © {{ 'now' | date: '%Y' }} Colorlib. Distributed under the <a href="https://github.com/puikinsh/gentelella/blob/master/LICENSE.txt">MIT license</a>.</p>
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="search-overlay"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|