vuepress-theme-plume/assets/optimize-build-BMKpOs1r.js

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":"/guide/optimize-build/","title":"构建优化 | 指南","lang":"zh-CN","frontmatter":{"title":"构建优化","icon":"clarity:bundle-solid","outline":2,"createTime":"2024/09/10 01:50:20","permalink":"/guide/optimize-build/","description":"图片尺寸优化 在 Markdown 文档中通过 ![alt](url) 或 &lt;img src=&quot;url&quot;&gt; 嵌入图片时，虽然能够正常显示内容，但潜在的布局稳定性问题往往被忽视。 布局抖动问题分析 当图片体积较小或网络状况良好时，页面布局抖动并不明显。然而，面对大体积图片或较差的网络环境，图片加载过程中的布局重排问题就会凸...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"构建优化\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/optimize-build/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"构建优化"}],["meta",{"property":"og:description","content":"图片尺寸优化 在 Markdown 文档中通过 ![alt](url) 或 &lt;img src=&quot;url&quot;&gt; 嵌入图片时，虽然能够正常显示内容，但潜在的布局稳定性问题往往被忽视。 布局抖动问题分析 当图片体积较小或网络状况良好时，页面布局抖动并不明显。然而，面对大体积图片或较差的网络环境，图片加载过程中的布局重排问题就会凸..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/optimize-build/"}]]},"readingTime":{"minutes":2.98,"words":893},"git":{"createdTime":1759849989000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":1,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"}]},"autoDesc":true,"filePathRelative":"guide/quick-start/optimize-build.md","headers":[],"bulletin":false}`),l={name:`optimize-build.md`},u={id:`图片尺寸优化`,tabindex:`-1`},d={class:`header-anchor`,href:`#图片尺寸优化`};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(`图片尺寸优化 `,-1),n(h,{type:`warning`,text:`试验性`})])])]),c[1]||=a(`<p>在 Markdown 文档中通过 <code>![alt](url)</code> 或 <code>&lt;img src=&quot;url&quot;&gt;</code> 嵌入图片时，虽然能够正常显示内容，但潜在的布局稳定性问题往往被忽视。</p><h3 id="布局抖动问题分析" tabindex="-1"><a class="header-anchor" href="#布局抖动问题分析"><span>布局抖动问题分析</span></a></h3><p>当图片体积较小或网络状况良好时，页面布局抖动并不明显。然而，面对大体积图片或较差的网络环境，图片加载过程中的布局重排问题就会凸显：</p><ol><li><strong>加载前</strong>：图片占位空间未被预留，后续内容向上挤压</li><li><strong>加载后</strong>：图片突然占据空间，迫使后续内容重新排列</li><li><strong>用户体验</strong>：频繁的布局变化导致视觉跳动和操作卡顿</li></ol><h3 id="解决方案-预计算图片尺寸" tabindex="-1"><a class="header-anchor" href="#解决方案-预计算图片尺寸"><span>解决方案：预计算图片尺寸</span></a></h3><p>根据 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#height" target="_blank" rel="noopener noreferrer">MDN 文档</a>的建议，同时指定 <code>height</code> 和 <code>width</code> 属性能够让浏览器提前计算图片宽高比，预留显示空间，从根本上消除布局偏移。</p><p>主题提供的自动化解决方案：</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;">// 可选 &#39;local&#39; | &#39;all&#39;</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>配置选项说明</strong>：</p><ul><li><code>&#39;local&#39;</code> 或 <code>true</code>：仅为本地图片添加尺寸属性</li><li><code>&#39;all&#39;</code>：同时处理本地和远程图片资源</li></ul><p><strong>实现机制</strong>：</p><ul><li>构建时自动分析图片原始尺寸</li><li>为 <code>&lt;img&gt;</code> 标签注入精确的 <code>width</code> 和 <code>height</code> 属性</li><li>基于图片宽高比预留显示空间</li></ul><div class="hint-container important"><p class="hint-container-title">性能注意事项</p><ul><li>此功能仅在<strong>生产环境构建</strong>时生效，避免开发阶段性能损耗</li><li>使用 <code>&#39;all&#39;</code> 选项时会请求所有远程图片资源，可能显著增加构建时间</li><li>优化策略：并发请求 + 头部信息分析，在获取尺寸数据后立即终止连接</li></ul></div><h2 id="图标加载优化" tabindex="-1"><a class="header-anchor" href="#图标加载优化"><span>图标加载优化</span></a></h2><h3 id="iconify-集成优势" tabindex="-1"><a class="header-anchor" href="#iconify-集成优势"><span>Iconify 集成优势</span></a></h3><p>主题深度集成 <a href="https://icon-sets.iconify.design/" target="_blank" rel="noopener noreferrer">Iconify</a> 项目，提供超过 20 万枚图标的选择灵活性。虽然本地安装 <code>@iconify/json</code> 包需要约 70MB 存储空间，但实际构建时仅包含使用到的图标资源，实现按需加载。</p><h3 id="性能瓶颈与解决方案" tabindex="-1"><a class="header-anchor" href="#性能瓶颈与解决方案"><span>性能瓶颈与解决方案</span></a></h3><p><strong>问题根源</strong>： 图标按集合（collection）组织，每个集合包含 100-1000+ 个图标的 JSON 文件。当使用多个不同集合的图标时，频繁的 I/O 读取和 JSON 解析会产生显著性能开销。</p><p><strong>实际案例</strong>：</p><ul><li>使用 54 个图标集合中的 160+ 个图标</li><li>初始构建：约 500ms 图标解析时间</li><li>用户体验：开发服务器启动缓慢</li></ul><p><strong>缓存优化机制</strong>：</p>`,21),n(g,{code:`eJxLL0osyFDwCeJSAALH6JfLpj1bs/DZvJanu3fFKujq2ik4Rb9YvvjZvAlP9u5/PmXF09n7ni1ojwWrdgLLO0c/nzL/WceE53smP10749m09ie7t0HkncHyLtFPdvUgzATLuIBlXKNfrN/9tH8aRCdExhUs4xZtZJBbrPB0XQ/Q4KddC17s3RvLBQCJV07B`}),c[2]||=a(`<p><strong>优化效果</strong>：</p><ul><li>构建时间从 500ms 降至 20ms</li><li>开发服务器启动速度显著提升</li><li>资源利用率最大化</li></ul><h3 id="最佳实践建议" tabindex="-1"><a class="header-anchor" href="#最佳实践建议"><span>最佳实践建议</span></a></h3><ol><li><p><strong>图标使用规划</strong>：</p><ul><li>优先选择同一集合内的图标</li><li>避免过度分散使用不同集合</li></ul></li><li><p><strong>开发体验优化</strong>：</p><ul><li>首次启动后缓存自动生效</li><li>新增图标时缓存智能更新</li><li>无需手动干预缓存管理</li></ul></li><li><p><strong>生产构建保障</strong>：</p><ul><li>缓存机制不影响最终输出</li><li>保持图标资源的按需加载特性</li><li>确保构建产物的最优体积</li></ul></li></ol><p>通过这两项优化措施，主题在保持功能丰富性的同时，确保了优秀的构建性能和运行时体验。</p>`,5)])}var p=s(l,[[`render`,f]]);export{c as _pageData,p as default};