77 lines
5.6 KiB
XML
77 lines
5.6 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1120" role="img" aria-labelledby="title desc">
|
|
<title id="title">Webpack 4: два entry и общие chunks</title>
|
|
<desc id="desc">Вертикальная схема: общий runtime ведёт к chunks vendors и common, которые нужны двум отдельным entry catalog и checkout.</desc>
|
|
<defs>
|
|
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#f7fafc"/>
|
|
<stop offset="100%" stop-color="#eef4ff"/>
|
|
</linearGradient>
|
|
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
|
|
<path d="M0,0 L10,5 L0,10 z" fill="#60708a"/>
|
|
</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="1120" rx="28" fill="url(#bg)"/>
|
|
<text x="40" y="62" fill="#14213d" font-family="Arial, sans-serif" font-size="31" font-weight="700">Webpack 4: два 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">а каждая страница запускает свой сценарий.</text>
|
|
|
|
<g filter="url(#shadow)">
|
|
<rect x="40" y="170" width="640" height="112" rx="18" fill="#ffffff" stroke="#c9d6e8"/>
|
|
<rect x="40" y="170" width="640" height="35" rx="18" fill="#dceeff"/>
|
|
<text x="66" y="194" fill="#255a9b" font-family="Arial, sans-serif" font-size="17" font-weight="700">ОБЩИЙ RUNTIME</text>
|
|
<text x="66" y="243" fill="#14213d" font-family="Arial, sans-serif" font-size="27" font-weight="700">runtime</text>
|
|
<text x="205" y="243" fill="#516079" font-family="Arial, sans-serif" font-size="18">связывает modules и chunks</text>
|
|
</g>
|
|
|
|
<path d="M260 282 V328 H190 V352" fill="none" stroke="#60708a" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<path d="M460 282 V328 H530 V352" fill="none" stroke="#60708a" stroke-width="4" marker-end="url(#arrow)"/>
|
|
|
|
<g filter="url(#shadow)">
|
|
<rect x="40" y="352" width="300" height="160" rx="18" fill="#ffffff" stroke="#c9d6e8"/>
|
|
<rect x="40" y="352" width="300" height="35" rx="18" fill="#f6e8c3"/>
|
|
<text x="62" y="376" fill="#8a5a00" font-family="Arial, sans-serif" font-size="16" font-weight="700">ВНЕШНИЕ ПАКЕТЫ</text>
|
|
<text x="62" y="429" fill="#14213d" font-family="Arial, sans-serif" font-size="27" font-weight="700">vendors</text>
|
|
<text x="62" y="460" fill="#516079" font-family="Arial, sans-serif" font-size="18">например, jquery</text>
|
|
<text x="62" y="488" fill="#516079" font-family="Arial, sans-serif" font-size="16">из node_modules</text>
|
|
</g>
|
|
|
|
<g filter="url(#shadow)">
|
|
<rect x="380" y="352" width="300" height="160" rx="18" fill="#ffffff" stroke="#c9d6e8"/>
|
|
<rect x="380" y="352" width="300" height="35" rx="18" fill="#d8f1e2"/>
|
|
<text x="402" y="376" fill="#226b46" font-family="Arial, sans-serif" font-size="16" font-weight="700">ОБЩИЙ КОД</text>
|
|
<text x="402" y="429" fill="#14213d" font-family="Arial, sans-serif" font-size="27" font-weight="700">common</text>
|
|
<text x="402" y="460" fill="#516079" font-family="Arial, sans-serif" font-size="18">src/shared/money.js</text>
|
|
<text x="402" y="488" fill="#516079" font-family="Arial, sans-serif" font-size="16">достигнут из двух entry</text>
|
|
</g>
|
|
|
|
<path d="M190 512 V564 H360" fill="none" stroke="#60708a" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<path d="M530 512 V564 H360" fill="none" stroke="#60708a" stroke-width="4" marker-end="url(#arrow)"/>
|
|
|
|
<g filter="url(#shadow)">
|
|
<rect x="40" y="564" width="640" height="142" rx="18" fill="#ffffff" stroke="#bcd3e7"/>
|
|
<rect x="40" y="564" width="640" height="36" rx="18" fill="#d9eaff"/>
|
|
<text x="66" y="589" fill="#255a9b" font-family="Arial, sans-serif" font-size="17" font-weight="700">СТРАНИЦА /CATALOG/</text>
|
|
<text x="66" y="650" fill="#14213d" font-family="Arial, sans-serif" font-size="30" font-weight="700">catalog entry</text>
|
|
<text x="66" y="681" fill="#516079" font-family="Arial, sans-serif" font-size="18">Только код каталога; checkout сюда не подключается.</text>
|
|
</g>
|
|
|
|
<path d="M190 512 V738 H360 V762" fill="none" stroke="#60708a" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<path d="M530 512 V738 H360 V762" fill="none" stroke="#60708a" stroke-width="4" marker-end="url(#arrow)"/>
|
|
|
|
<g filter="url(#shadow)">
|
|
<rect x="40" y="762" width="640" height="142" rx="18" fill="#ffffff" stroke="#bcd3e7"/>
|
|
<rect x="40" y="762" width="640" height="36" rx="18" fill="#e7dcff"/>
|
|
<text x="66" y="787" fill="#6542a1" font-family="Arial, sans-serif" font-size="17" font-weight="700">СТРАНИЦА /CHECKOUT/</text>
|
|
<text x="66" y="848" fill="#14213d" font-family="Arial, sans-serif" font-size="30" font-weight="700">checkout entry</text>
|
|
<text x="66" y="879" fill="#516079" font-family="Arial, sans-serif" font-size="18">Только код заказа; catalog сюда не подключается.</text>
|
|
</g>
|
|
|
|
<rect x="40" y="968" width="640" height="98" rx="16" fill="#14213d"/>
|
|
<text x="66" y="1007" fill="#ffffff" font-family="Arial, sans-serif" font-size="20" font-weight="700">Проверка в HTML</text>
|
|
<text x="66" y="1040" fill="#ffffff" font-family="Arial, sans-serif" font-size="18">У каждой страницы свой entry и нужные общие chunks.</text>
|
|
</svg>
|