revise late 2018 editorial articles

web/public/assets/editorial/2019/webpack-jquery-order-2019.svg

@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 1130" role="img" aria-labelledby="title desc">
+  <title id="title">Порядок jQuery и legacy-плагина в Webpack production</title>
+  <desc id="desc">Вертикальная схема показывает правильный порядок через runtime, bootstrap с window.jQuery и runtime require плагина, а ниже плохой путь со статическим импортом.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#0f172a"/>
+      <stop offset="1" stop-color="#312e81"/>
+    </linearGradient>
+    <filter id="shadow" x="-15%" y="-10%" width="130%" height="130%">
+      <feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#020617" flood-opacity=".32"/>
+    </filter>
+    <marker id="good" markerWidth="12" markerHeight="12" refX="6" refY="10" orient="auto">
+      <path d="M0,0 L12,0 L6,12 Z" fill="#34d399"/>
+    </marker>
+    <marker id="bad" markerWidth="12" markerHeight="12" refX="6" refY="10" orient="auto">
+      <path d="M0,0 L12,0 L6,12 Z" fill="#fb7185"/>
+    </marker>
+  </defs>
+  <rect width="640" height="1130" rx="28" fill="url(#bg)"/>
+  <g font-family="Inter,Arial,sans-serif">
+    <text x="48" y="58" fill="#f8fafc" font-size="27" font-weight="700">Webpack production:</text>
+    <text x="48" y="91" fill="#f8fafc" font-size="27" font-weight="700">порядок до legacy-плагина</text>
+    <text x="48" y="122" fill="#c4b5fd" font-size="16">ProvidePlugin не заменяет явный момент window.jQuery.</text>
+
+    <text x="48" y="170" fill="#a7f3d0" font-size="21" font-weight="700">Рабочий путь</text>
+    <g filter="url(#shadow)">
+      <rect x="48" y="198" width="544" height="116" rx="20" fill="#064e3b" stroke="#34d399"/>
+      <rect x="48" y="374" width="544" height="116" rx="20" fill="#065f46" stroke="#34d399"/>
+      <rect x="48" y="550" width="544" height="116" rx="20" fill="#047857" stroke="#34d399"/>
+      <rect x="48" y="726" width="544" height="116" rx="20" fill="#064e3b" stroke="#34d399"/>
+    </g>
+    <text x="80" y="242" fill="#d1fae5" font-size="21" font-weight="700">1. runtime и vendors chunk</text>
+    <text x="80" y="278" fill="#a7f3d0" font-size="16">В фактическом графе есть один jquery.</text>
+    <path d="M320 314 V374" fill="none" stroke="#34d399" stroke-width="4" marker-end="url(#good)"/>
+
+    <text x="80" y="418" fill="#d1fae5" font-size="21" font-weight="700">2. bootstrap</text>
+    <text x="80" y="454" fill="#a7f3d0" font-size="16">window.jQuery = $ и проверка экземпляра.</text>
+    <path d="M320 490 V550" fill="none" stroke="#34d399" stroke-width="4" marker-end="url(#good)"/>
+
+    <text x="80" y="594" fill="#ecfdf5" font-size="21" font-weight="700">3. runtime require плагина</text>
+    <text x="80" y="630" fill="#d1fae5" font-size="16">Плагин читает уже существующий глобал.</text>
+    <path d="M320 666 V726" fill="none" stroke="#34d399" stroke-width="4" marker-end="url(#good)"/>
+
+    <text x="80" y="770" fill="#d1fae5" font-size="21" font-weight="700">4. ready handler формы</text>
+    <text x="80" y="806" fill="#a7f3d0" font-size="16">DOM есть, метод плагина доступен один раз.</text>
+
+    <text x="48" y="900" fill="#fecdd3" font-size="21" font-weight="700">Плохой путь</text>
+    <g filter="url(#shadow)">
+      <rect x="48" y="928" width="544" height="120" rx="20" fill="#4c0519" stroke="#fb7185"/>
+    </g>
+    <text x="80" y="970" fill="#ffe4e6" font-size="21" font-weight="700">static import legacy-плагина</text>
+    <text x="80" y="1006" fill="#fecdd3" font-size="16">Плагин исполняется раньше тела bootstrap.</text>
+    <text x="80" y="1032" fill="#fecdd3" font-size="16">window.jQuery ещё пуст, форма падает в production.</text>
+
+    <rect x="48" y="1074" width="544" height="34" rx="12" fill="#111827" stroke="#4f46e5"/>
+    <text x="70" y="1097" fill="#c7d2fe" font-size="13">Проверка: stats.json, чистый dist, глобал до require.</text>
+  </g>
+</svg>