62 lines
4.1 KiB
XML
62 lines
4.1 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="1030" viewBox="0 0 720 1030" role="img" aria-labelledby="title desc">
|
|
<title id="title">Граница нативного разрешения ES-модуля и Webpack</title>
|
|
<desc id="desc">Верхняя панель показывает: браузер превращает относительный import из main.js в запрос config.js. Нижняя панель показывает: Webpack заранее разрешает имя пакета, строит graph и выпускает asset. У import общий синтаксис, но разные этапы.</desc>
|
|
<defs>
|
|
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#111b34"/>
|
|
<stop offset="1" stop-color="#07101f"/>
|
|
</linearGradient>
|
|
<marker id="blueArrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
|
|
<path d="M0 0 L10 5 L0 10 z" fill="#79a9ff"/>
|
|
</marker>
|
|
<marker id="mintArrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
|
|
<path d="M0 0 L10 5 L0 10 z" fill="#4cdbbd"/>
|
|
</marker>
|
|
<style>
|
|
.kicker { font: 700 16px Arial, sans-serif; letter-spacing: 2px; fill: #91b9ff; }
|
|
.heading { font: 700 35px Arial, sans-serif; fill: #f4f7ff; }
|
|
.panel { font: 700 28px Arial, sans-serif; fill: #f4f7ff; }
|
|
.label { font: 700 24px Arial, sans-serif; fill: #edf4ff; }
|
|
.code { font: 19px Menlo, Consolas, monospace; fill: #d0e1ff; }
|
|
.small { font: 20px Arial, sans-serif; fill: #d2dced; }
|
|
.badge { font: 700 20px Arial, sans-serif; fill: #07111e; }
|
|
</style>
|
|
</defs>
|
|
<rect width="720" height="1030" fill="url(#background)"/>
|
|
<text x="44" y="58" class="kicker">ES MODULES · RESOLUTION BOUNDARY</text>
|
|
<text x="44" y="106" class="heading">Одинаковый import, разные этапы</text>
|
|
|
|
<rect x="44" y="146" width="632" height="350" rx="22" fill="#142f4e" stroke="#6f9fe6" stroke-width="2"/>
|
|
<text x="76" y="192" class="panel">Нативный браузер</text>
|
|
<rect x="76" y="226" width="244" height="94" rx="14" fill="#1d466d"/>
|
|
<text x="100" y="263" class="label">main.js</text>
|
|
<text x="100" y="293" class="code">"./config.js"</text>
|
|
<path d="M320 273 H430" stroke="#79a9ff" stroke-width="5" marker-end="url(#blueArrow)"/>
|
|
<text x="332" y="247" class="small">URL</text>
|
|
<rect x="446" y="226" width="194" height="94" rx="14" fill="#205a72"/>
|
|
<text x="472" y="263" class="label">GET</text>
|
|
<text x="472" y="293" class="code">config.js</text>
|
|
<path d="M542 320 V362 H198" stroke="#79a9ff" stroke-width="5" fill="none" marker-end="url(#blueArrow)"/>
|
|
<rect x="76" y="384" width="564" height="76" rx="14" fill="#0c2038"/>
|
|
<text x="100" y="416" class="small">Проверяем: import → Request URL</text>
|
|
<text x="100" y="445" class="small">→ HTTP-ответ. Нет aliases и .js-подбора.</text>
|
|
|
|
<rect x="44" y="538" width="632" height="350" rx="22" fill="#173b3b" stroke="#5ed5bc" stroke-width="2"/>
|
|
<text x="76" y="584" class="panel">Webpack до браузера</text>
|
|
<rect x="76" y="618" width="224" height="94" rx="14" fill="#1d5a55"/>
|
|
<text x="100" y="655" class="label">source import</text>
|
|
<text x="100" y="685" class="code">"date-kit"</text>
|
|
<path d="M300 665 H410" stroke="#4cdbbd" stroke-width="5" marker-end="url(#mintArrow)"/>
|
|
<rect x="426" y="618" width="214" height="94" rx="14" fill="#1d7269"/>
|
|
<text x="450" y="655" class="label">resolve</text>
|
|
<text x="450" y="685" class="code">graph</text>
|
|
<path d="M533 712 V754 H198" stroke="#4cdbbd" stroke-width="5" fill="none" marker-end="url(#mintArrow)"/>
|
|
<rect x="76" y="776" width="564" height="76" rx="14" fill="#0d2827"/>
|
|
<text x="100" y="808" class="small">Проверяем: config → resolved module</text>
|
|
<text x="100" y="837" class="small">→ emitted asset. Aliases живут здесь.</text>
|
|
|
|
<rect x="126" y="930" width="468" height="56" rx="28" fill="#f2c66c"/>
|
|
<text x="203" y="966" class="badge">import — общий синтаксис</text>
|
|
</svg>
|
