79 lines
6.0 KiB
XML
79 lines
6.0 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1160" role="img" aria-labelledby="title desc">
|
||
<title id="title">Webpack 4: расследование роста bundle после нового entry</title>
|
||
<desc id="desc">Вертикальная схема диагностики: одинаковая production-сборка, stats JSON, связь modules и chunks, проверка HTML и Network, затем решение о splitChunks.</desc>
|
||
<defs>
|
||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#f8fbff"/>
|
||
<stop offset="100%" stop-color="#fff8f0"/>
|
||
</linearGradient>
|
||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
|
||
<path d="M0,0 L10,5 L0,10 z" fill="#5e6d82"/>
|
||
</marker>
|
||
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
|
||
<feDropShadow dx="0" dy="6" stdDeviation="8" flood-color="#253858" flood-opacity="0.12"/>
|
||
</filter>
|
||
</defs>
|
||
<rect width="720" height="1160" rx="28" fill="url(#bg)"/>
|
||
<text x="40" y="62" fill="#14213d" font-family="Arial, sans-serif" font-size="31" font-weight="700">Bundle вырос после entry</text>
|
||
<text x="40" y="98" fill="#516079" font-family="Arial, sans-serif" font-size="20">Сначала доказательство,</text>
|
||
<text x="40" y="124" fill="#516079" font-family="Arial, sans-serif" font-size="20">потом настройка splitChunks.</text>
|
||
|
||
<g filter="url(#shadow)">
|
||
<rect x="40" y="170" width="640" height="120" rx="18" fill="#ffffff" stroke="#c9d6e8"/>
|
||
<circle cx="84" cy="214" r="22" fill="#255a9b"/>
|
||
<text x="77" y="222" fill="#ffffff" font-family="Arial, sans-serif" font-size="18" font-weight="700">1</text>
|
||
<text x="126" y="219" fill="#14213d" font-family="Arial, sans-serif" font-size="25" font-weight="700">Одинаковый production build</text>
|
||
<text x="126" y="254" fill="#516079" font-family="Arial, sans-serif" font-size="18">До и после: одна команда и тот же webpack-cli.</text>
|
||
</g>
|
||
<path d="M360 290 V328" fill="none" stroke="#5e6d82" stroke-width="4" marker-end="url(#arrow)"/>
|
||
|
||
<g filter="url(#shadow)">
|
||
<rect x="40" y="328" width="640" height="120" rx="18" fill="#ffffff" stroke="#c9d6e8"/>
|
||
<circle cx="84" cy="372" r="22" fill="#226b46"/>
|
||
<text x="77" y="380" fill="#ffffff" font-family="Arial, sans-serif" font-size="18" font-weight="700">2</text>
|
||
<text x="126" y="377" fill="#14213d" font-family="Arial, sans-serif" font-size="25" font-weight="700">stats.json</text>
|
||
<text x="126" y="412" fill="#516079" font-family="Arial, sans-serif" font-size="18">Сначала assets, затем modules и chunks.</text>
|
||
</g>
|
||
<path d="M360 448 V486" fill="none" stroke="#5e6d82" stroke-width="4" marker-end="url(#arrow)"/>
|
||
|
||
<g filter="url(#shadow)">
|
||
<rect x="40" y="486" width="640" height="120" rx="18" fill="#ffffff" stroke="#c9d6e8"/>
|
||
<circle cx="84" cy="530" r="22" fill="#8a5a00"/>
|
||
<text x="77" y="538" fill="#ffffff" font-family="Arial, sans-serif" font-size="18" font-weight="700">3</text>
|
||
<text x="126" y="535" fill="#14213d" font-family="Arial, sans-serif" font-size="25" font-weight="700">HTML и Network</text>
|
||
<text x="126" y="570" fill="#516079" font-family="Arial, sans-serif" font-size="18">Что запрашивает конкретная страница?</text>
|
||
</g>
|
||
<path d="M360 606 V644" fill="none" stroke="#5e6d82" stroke-width="4" marker-end="url(#arrow)"/>
|
||
|
||
<g filter="url(#shadow)">
|
||
<rect x="40" y="644" width="640" height="142" rx="20" fill="#ffffff" stroke="#b8dcc8" stroke-width="2"/>
|
||
<text x="68" y="698" fill="#226b46" font-family="Arial, sans-serif" font-size="26" font-weight="700">Есть реальное дублирование?</text>
|
||
<text x="68" y="738" fill="#516079" font-family="Arial, sans-serif" font-size="18">Один модуль нужен двум initial-путям</text>
|
||
<text x="68" y="766" fill="#516079" font-family="Arial, sans-serif" font-size="18">и обе страницы действительно его запрашивают.</text>
|
||
</g>
|
||
|
||
<path d="M202 786 V846" fill="none" stroke="#a14a4a" stroke-width="4" marker-end="url(#arrow)"/>
|
||
<path d="M518 786 V846" fill="none" stroke="#226b46" stroke-width="4" marker-end="url(#arrow)"/>
|
||
<text x="174" y="826" fill="#a14a4a" font-family="Arial, sans-serif" font-size="20" font-weight="700">нет</text>
|
||
<text x="497" y="826" fill="#226b46" font-family="Arial, sans-serif" font-size="20" font-weight="700">да</text>
|
||
|
||
<g filter="url(#shadow)">
|
||
<rect x="40" y="846" width="300" height="176" rx="18" fill="#fff0f0" stroke="#efb8b8"/>
|
||
<text x="66" y="898" fill="#8f3636" font-family="Arial, sans-serif" font-size="23" font-weight="700">Не менять</text>
|
||
<text x="66" y="929" fill="#8f3636" font-family="Arial, sans-serif" font-size="23" font-weight="700">splitChunks</text>
|
||
<text x="66" y="968" fill="#6c5555" font-family="Arial, sans-serif" font-size="17">Исправить шаблон</text>
|
||
<text x="66" y="993" fill="#6c5555" font-family="Arial, sans-serif" font-size="17">или сравнение build.</text>
|
||
</g>
|
||
<g filter="url(#shadow)">
|
||
<rect x="380" y="846" width="300" height="176" rx="18" fill="#e7f7ed" stroke="#b8dcc8"/>
|
||
<text x="406" y="898" fill="#226b46" font-family="Arial, sans-serif" font-size="23" font-weight="700">Точечная</text>
|
||
<text x="406" y="929" fill="#226b46" font-family="Arial, sans-serif" font-size="23" font-weight="700">cache group</text>
|
||
<text x="406" y="968" fill="#3f6d53" font-family="Arial, sans-serif" font-size="17">Повторить stats</text>
|
||
<text x="406" y="993" fill="#3f6d53" font-family="Arial, sans-serif" font-size="17">и Network.</text>
|
||
</g>
|
||
|
||
<rect x="40" y="1062" width="640" height="60" rx="14" fill="#14213d"/>
|
||
<text x="66" y="1100" fill="#ffffff" font-family="Arial, sans-serif" font-size="18">Рост dist не равен росту загрузки одной страницы.</text>
|
||
</svg>
|