This commit is contained in:
@@ -158,7 +158,7 @@ module.exports = {
|
||||
paragraph('У правил выделения тоже есть граница. <code>vendors</code> смотрит только на путь внутри <code>node_modules</code>; пакет, который нужен одному <code>checkout</code>, не обязан переезжать в общий файл. <code>common</code> смотрит на повторное достижение модуля из двух chunks. Поэтому я не называю папку <code>shared</code> гарантией оптимизации: имя папки помогает человеку, а решение принимает правило сборки по графу и его условиям.'),
|
||||
paragraph('Перед тем как менять пороги, полезно сохранить список ассетов первого build. После изменения я сравниваю не общую сумму каталога, а роли файлов: появился ли <code>vendors</code>, попал ли <code>money.js</code> в <code>common</code>, остался ли код каталога в <code>catalog</code>. Так видно, какое именно правило сработало, и не приходится угадывать по одному числу в терминале.'),
|
||||
heading('Проверка не заканчивается на появлении файлов'),
|
||||
paragraph('После сборки должны появиться файлы с именами, зависящими от хеша: <code>runtime.…js</code>, <code>vendors.…js</code>, при нашем маленьком примере <code>common.…js</code>, а также <code>catalog.…js</code> и <code>checkout.…js</code>. Хеши нельзя вшивать в шаблон HTML вручную. Шаблонизатор, плагин или серверный код должен получить актуальный список ассетов из сборки.'),
|
||||
paragraph('После сборки должны появиться файлы с именами, зависящими от хеша: <code>runtime.[contenthash].js</code>, <code>vendors.[contenthash].js</code>, при нашем маленьком примере <code>common.[contenthash].js</code>, а также <code>catalog.[contenthash].js</code> и <code>checkout.[contenthash].js</code>. Хеши нельзя вшивать в шаблон HTML вручную. Шаблонизатор, плагин или серверный код должен получить актуальный список ассетов из сборки.'),
|
||||
codeBlock(String.raw`
|
||||
<!-- catalog.html: порядок — часть договора страницы -->
|
||||
<script src="/assets/runtime.8ab1.js"></script>
|
||||
@@ -286,7 +286,7 @@ const fieldArticle = {
|
||||
excerpt: 'Пошаговая диагностика Webpack 4: отделяем новые ассеты от реального дублирования, читаем stats.json и проверяем, что браузер действительно скачивает.',
|
||||
readingMinutes: 10,
|
||||
contentHtml: [
|
||||
paragraph('Симптом: после добавления <code>admin</code>-entry вырос <code>site.…js</code>, а Network обычной страницы показывает запрос к <code>admin.…js</code>. Пользователь получает код панели, которой не откроет; если править только сумму файлов в <code>dist</code>, легко оставить этот лишний запрос или сломать подключение нужного entry.'),
|
||||
paragraph('Симптом: после добавления <code>admin</code>-entry вырос <code>site.[contenthash].js</code>, а Network обычной страницы показывает запрос к <code>admin.[contenthash].js</code>. Пользователь получает код панели, которой не откроет; если править только сумму файлов в <code>dist</code>, легко оставить этот лишний запрос или сломать подключение нужного entry.'),
|
||||
paragraph('Главный вопрос статьи: <strong>как по данным Webpack 4 доказать, почему bundle вырос после добавления entry, прежде чем менять конфигурацию?</strong> Для ответа нужны три вещи: список emitted-ассетов, связь модуля с chunks и фактические script-теги в HTML. Одной цифры из файловой системы недостаточно.'),
|
||||
heading('Сначала фиксирую условия сравнения'),
|
||||
paragraph('Сравнивать development-результат с production-результатом бессмысленно: режим, минификация, source map и плагины меняют картину сильнее, чем новый entry. Я делаю два production-build на одном коммите: до изменения и после него. Для каждого сохраняю JSON статистики отдельно, например <code>stats-before.json</code> и <code>stats-after.json</code>.'),
|
||||
@@ -343,7 +343,7 @@ for (const module of repeated.slice(0, 30)) {
|
||||
dataTable(
|
||||
['Наблюдение', 'Что это может означать', 'Следующее действие'],
|
||||
[
|
||||
['Появился новый <code>admin.…js</code>, старый <code>site.…js</code> почти не изменился', 'В <code>dist</code> лежит ещё одна страница, но старая не стала тяжелее', 'Проверить, что старый HTML не подключает <code>admin</code>'],
|
||||
['Появился новый <code>admin.[contenthash].js</code>, старый <code>site.[contenthash].js</code> почти не изменился', 'В <code>dist</code> лежит ещё одна страница, но старая не стала тяжелее', 'Проверить, что старый HTML не подключает <code>admin</code>'],
|
||||
['Один пакет из <code>node_modules</code> виден у двух initial chunks', 'Внешняя зависимость достигнута из двух entry и не вынесена', 'Проверить <code>splitChunks</code> и условия cache group'],
|
||||
['Оба entry подключены в одном HTML', 'Шаблон страницы получает чужой сценарий', 'Исправить генерацию script-тегов до настройки оптимизации'],
|
||||
['Рост только в development', 'Сравнение сделано в разных режимах или с source map', 'Повторить замер одинаковой production-командой'],
|
||||
|
||||
Reference in New Issue
Block a user