huncode/progcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revise June 2018 webpack articles
Build and deploy / deploy (push) Successful in 12s
Details

Browse Source
This commit is contained in:
huncode
2026-07-31 09:24:35 +03:00
parent 90692f0f16
commit c27ec20965
6 changed files with 684 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/assets/editorial/2018/webpack-entry-diagnosis-2018.svg
+78
View File
@@ -0,0 +1,78 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

web/public/assets/editorial/2018/webpack-entry-graph-2018.svg
+75
View File
@@ -0,0 +1,75 @@
<?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 к общему модулю</title>
<desc id="desc">Вертикальный граф показывает, как entry site и admin достигают собственных модулей и затем общих зависимостей date-format и jquery.</desc>
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fffaf3"/>
<stop offset="100%" stop-color="#f3f7ff"/>
</linearGradient>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
<path d="M0,0 L10,5 L0,10 z" fill="#6c7280"/>
</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">От 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="174" width="300" height="132" rx="18" fill="#ffffff" stroke="#bcd3e7"/>
<rect x="40" y="174" width="300" height="35" rx="18" fill="#d9eaff"/>
<text x="62" y="198" fill="#255a9b" font-family="Arial, sans-serif" font-size="16" font-weight="700">ENTRY 1</text>
<text x="62" y="254" fill="#14213d" font-family="Arial, sans-serif" font-size="29" font-weight="700">site.js</text>
<text x="62" y="283" fill="#516079" font-family="Arial, sans-serif" font-size="17">сценарий обычной страницы</text>
</g>
<g filter="url(#shadow)">
<rect x="380" y="174" width="300" height="132" rx="18" fill="#ffffff" stroke="#bcd3e7"/>
<rect x="380" y="174" width="300" height="35" rx="18" fill="#e9dcff"/>
<text x="402" y="198" fill="#6542a1" font-family="Arial, sans-serif" font-size="16" font-weight="700">ENTRY 2</text>
<text x="402" y="254" fill="#14213d" font-family="Arial, sans-serif" font-size="29" font-weight="700">admin.js</text>
<text x="402" y="283" fill="#516079" font-family="Arial, sans-serif" font-size="17">сценарий панели</text>
</g>
<path d="M190 306 V354" fill="none" stroke="#255a9b" stroke-width="4" marker-end="url(#arrow)"/>
<path d="M530 306 V354" fill="none" stroke="#6542a1" stroke-width="4" marker-end="url(#arrow)"/>
<g filter="url(#shadow)">
<rect x="40" y="354" width="300" height="130" rx="18" fill="#ffffff" stroke="#c9d6e8"/>
<text x="62" y="410" fill="#14213d" font-family="Arial, sans-serif" font-size="24" font-weight="700">site/search.js</text>
<text x="62" y="444" fill="#516079" font-family="Arial, sans-serif" font-size="17">нужен только site</text>
</g>
<g filter="url(#shadow)">
<rect x="380" y="354" width="300" height="130" rx="18" fill="#ffffff" stroke="#c9d6e8"/>
<text x="402" y="410" fill="#14213d" font-family="Arial, sans-serif" font-size="24" font-weight="700">admin/report.js</text>
<text x="402" y="444" fill="#516079" font-family="Arial, sans-serif" font-size="17">нужен только admin</text>
</g>
<path d="M190 484 V538 H360 V570" fill="none" stroke="#255a9b" stroke-width="4" marker-end="url(#arrow)"/>
<path d="M530 484 V538 H360 V570" fill="none" stroke="#6542a1" stroke-width="4" marker-end="url(#arrow)"/>
<g filter="url(#shadow)">
<rect x="40" y="570" width="640" height="150" rx="18" fill="#ffffff" stroke="#b8dcc8" stroke-width="2"/>
<rect x="40" y="570" width="640" height="35" rx="18" fill="#d8f1e2"/>
<text x="66" y="594" fill="#226b46" font-family="Arial, sans-serif" font-size="16" font-weight="700">ОБЩИЙ ИСХОДНИК</text>
<text x="66" y="653" fill="#14213d" font-family="Arial, sans-serif" font-size="29" font-weight="700">shared/date-format.js</text>
<text x="66" y="688" fill="#516079" font-family="Arial, sans-serif" font-size="18">кандидат для common, если отдельный запрос оправдан</text>
</g>
<path d="M360 720 V766" fill="none" stroke="#6c7280" stroke-width="4" marker-end="url(#arrow)"/>
<g filter="url(#shadow)">
<rect x="40" y="766" width="640" height="150" rx="18" fill="#ffffff" stroke="#e6d093"/>
<rect x="40" y="766" width="640" height="35" rx="18" fill="#f6e8c3"/>
<text x="66" y="790" fill="#8a5a00" font-family="Arial, sans-serif" font-size="16" font-weight="700">ВНЕШНИЙ ПАКЕТ</text>
<text x="66" y="849" fill="#14213d" font-family="Arial, sans-serif" font-size="29" font-weight="700">jquery</text>
<text x="66" y="884" fill="#516079" font-family="Arial, sans-serif" font-size="18">кандидат для vendors при двух entry</text>
</g>
<rect x="40" y="980" width="640" height="96" rx="16" fill="#14213d"/>
<text x="66" y="1018" fill="#ffffff" font-family="Arial, sans-serif" font-size="20" font-weight="700">Важная граница</text>
<text x="66" y="1051" fill="#ffffff" font-family="Arial, sans-serif" font-size="18">Общий файл на диске не гарантирует общий chunk в сборке.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

web/public/assets/editorial/2018/webpack-entry-shared-chunks-2018.svg
+76
View File
@@ -0,0 +1,76 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB