mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
9 lines
11 KiB
JavaScript
9 lines
11 KiB
JavaScript
import{B as e,P as t,_ as n,f as r,g as i,h as a,l as o}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as s}from"./plugin-vue_export-helper-CxTVcLa7.js";var c=JSON.parse(`{"path":"/en/guide/optimize-build/","title":"Build Optimization | Guide","lang":"en-US","frontmatter":{"title":"Build Optimization","icon":"clarity:bundle-solid","outline":2,"createTime":"2025/10/08 01:50:20","permalink":"/en/guide/optimize-build/","description":"Image Dimension Optimization When embedding images in Markdown documents via  or <img src="url">, the content displays correctly, but potential layout...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Build Optimization\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-09T07:46:05.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/optimize-build/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Build Optimization"}],["meta",{"property":"og:description","content":"Image Dimension Optimization When embedding images in Markdown documents via  or <img src="url">, the content displays correctly, but potential layout..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-10-09T07:46:05.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-09T07:46:05.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/optimize-build/"}]]},"readingTime":{"minutes":1.73,"words":519},"git":{"createdTime":1741490087000,"updatedTime":1759995965000,"contributors":[{"name":"zhenghaoyang24","username":"zhenghaoyang24","email":"95458562+zhenghaoyang24@users.noreply.github.com","commits":2,"avatar":"https://avatars.githubusercontent.com/zhenghaoyang24?v=4","url":"https://github.com/zhenghaoyang24"},{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":5,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"},{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"a023ca8654797eae18ab7264e100e8f9bec969bb","time":1745601605000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: deprecate old icon syntax and use <code>::icon::</code> syntax instead (#563)"},{"hash":"9f99ae3ca72b3085c6cd383a9084f42be299c400","time":1743080813000,"email":"95458562+zhenghaoyang24@users.noreply.github.com","author":"zhenghaoyang24","message":"docs: add en <code>markdown</code> doc (#538)","coAuthors":[{"name":"pengzhanbo","email":"volodymyr@foxmail.com"}]},{"hash":"a4ac3a30e0b74175b3cd4fd82c52b2321b013926","time":1741490087000,"email":"95458562+zhenghaoyang24@users.noreply.github.com","author":"zhenghaoyang24","message":"docs: add en-US docs (#514)","coAuthors":[{"name":"pengzhanbo","email":"volodymyr@foxmail.com"}]}]},"autoDesc":true,"filePathRelative":"en/guide/quick-start/optimize-build.md","headers":[],"bulletin":false}`),l={name:`optimize-build.md`},u={id:`image-dimension-optimization`,tabindex:`-1`},d={class:`header-anchor`,href:`#image-dimension-optimization`};function f(s,c,l,f,p,m){let h=e(`Badge`),g=e(`Mermaid`);return t(),r(`div`,null,[o(`h2`,u,[o(`a`,d,[o(`span`,null,[c[0]||=i(`Image Dimension Optimization `,-1),n(h,{type:`warning`,text:`Experimental`})])])]),c[1]||=a(`<p>When embedding images in Markdown documents via <code></code> or <code><img src="url"></code>, the content displays correctly, but potential layout stability issues are often overlooked.</p><h3 id="layout-shift-analysis" tabindex="-1"><a class="header-anchor" href="#layout-shift-analysis"><span>Layout Shift Analysis</span></a></h3><p>Layout shifts are not obvious when images are small or network conditions are good. However, with large images or poor network conditions, layout reflow during image loading becomes prominent:</p><ol><li><strong>Before Loading</strong>: Image placeholder space is not reserved, subsequent content is pushed up</li><li><strong>After Loading</strong>: Image suddenly occupies space, forcing subsequent content to reflow</li><li><strong>User Experience</strong>: Frequent layout changes cause visual jumps and operation lag</li></ol><h3 id="solution-pre-calculate-image-dimensions" tabindex="-1"><a class="header-anchor" href="#solution-pre-calculate-image-dimensions"><span>Solution: Pre-calculate Image Dimensions</span></a></h3><p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#height" target="_blank" rel="noopener noreferrer">MDN documentation</a>, specifying both <code>height</code> and <code>width</code> attributes allows browsers to calculate the image aspect ratio in advance and reserve display space, eliminating layout shifts at the source.</p><p>Automated solution provided by the theme:</p><div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> plugins</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> markdownPower</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
|
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> imageSize</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// Optional 'local' | 'all'</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> },</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div><p><strong>Configuration Options</strong>:</p><ul><li><code>'local'</code> or <code>true</code>: Only add dimension attributes for local images</li><li><code>'all'</code>: Process both local and remote image resources</li></ul><p><strong>Implementation Mechanism</strong>:</p><ul><li>Automatically analyze original image dimensions during build</li><li>Inject precise <code>width</code> and <code>height</code> attributes into <code><img></code> tags</li><li>Reserve display space based on image aspect ratio</li></ul><div class="hint-container important"><p class="hint-container-title">Performance Considerations</p><ul><li>This feature only takes effect in <strong>production builds</strong> to avoid performance overhead during development</li><li>Using the <code>'all'</code> option requests all remote image resources, which may significantly increase build time</li><li>Optimization strategy: Concurrent requests + header information analysis, terminating connections immediately after obtaining dimension data</li></ul></div><h2 id="icon-loading-optimization" tabindex="-1"><a class="header-anchor" href="#icon-loading-optimization"><span>Icon Loading Optimization</span></a></h2><h3 id="iconify-integration-benefits" tabindex="-1"><a class="header-anchor" href="#iconify-integration-benefits"><span>Iconify Integration Benefits</span></a></h3><p>The theme deeply integrates with the <a href="https://icon-sets.iconify.design/" target="_blank" rel="noopener noreferrer">Iconify</a> project, providing access to over 200,000 icons with flexible selection. Although locally installing the <code>@iconify/json</code> package requires approximately 70MB of storage, only the actually used icon resources are included in the build, achieving on-demand loading.</p><h3 id="performance-bottlenecks-and-solutions" tabindex="-1"><a class="header-anchor" href="#performance-bottlenecks-and-solutions"><span>Performance Bottlenecks and Solutions</span></a></h3><p><strong>Root Cause</strong>: Icons are organized by collections, with each collection containing JSON files of 100-1000+ icons. When using icons from multiple different collections, frequent I/O reads and JSON parsing create significant performance overhead.</p><p><strong>Real-world Case</strong>:</p><ul><li>Using 160+ icons from 54 icon collections</li><li>Initial build: ~500ms icon parsing time</li><li>User experience: Slow development server startup</li></ul><p><strong>Cache Optimization Mechanism</strong>:</p>`,21),n(g,{code:`eJwtjEEKgzAQRfc9xVxAKD1AoYmmFFwU264GF1MzaECjZsz9lcS//O/93wdaBqibCxx5oHFBNlDRjbaForiDwjcFYfgJW3h1s5c2qSpRjU/2HGhj0NQNDMaNnAWdhBI/8S+8Rvbn7bkvE66wYbJ5m/sq9QZv10mgnsk638PXTQfeAcAJMUg=`}),c[2]||=a(`<p><strong>Optimization Results</strong>:</p><ul><li>Build time reduced from 500ms to 20ms</li><li>Development server startup speed significantly improved</li><li>Maximum resource utilization</li></ul><h3 id="best-practice-recommendations" tabindex="-1"><a class="header-anchor" href="#best-practice-recommendations"><span>Best Practice Recommendations</span></a></h3><ol><li><p><strong>Icon Usage Planning</strong>:</p><ul><li>Prioritize icons from the same collection</li><li>Avoid overly dispersed usage across different collections</li></ul></li><li><p><strong>Development Experience Optimization</strong>:</p><ul><li>Cache automatically takes effect after first startup</li><li>Intelligent cache updates when adding new icons</li><li>No manual cache management required</li></ul></li><li><p><strong>Production Build Assurance</strong>:</p><ul><li>Cache mechanism doesn't affect final output</li><li>Maintains on-demand loading characteristics of icon resources</li><li>Ensures optimal build artifact size</li></ul></li></ol><p>Through these two optimization measures, the theme maintains rich functionality while ensuring excellent build performance and runtime experience.</p>`,5)])}var p=s(l,[[`render`,f]]);export{c as _pageData,p as default}; |