Webpack — Примеры

Пример 1 — Целая библиотека, импортированная ради одной функции

Нужен всего один строковый помощник, а файл точки входа импортирует экспорт пакета по умолчанию. Бандл вырос на два порядка. Объясните, как сборщик решил, что включать, и перепишите импорт так, чтобы в бандл попадало только используемое.

// src/index.js
import _ from "lodash";

const slug = _.kebabCase(title);

пример вывода
main.[contenthash].js   72 kB

Решение

// src/index.js
import kebabCase from "lodash/kebabCase";

const slug = kebabCase(title);

пример вывода
main.[contenthash].js   3.1 kB

Сборщик не загружает перечисленные вами файлы — он их находит. Он стартует с точки входа и идёт по каждому импорту, поэтому импорт пакета по умолчанию втягивает точку входа этого пакета и всё, до чего она дотягивается. Импорт конкретного модуля оставляет остальную часть графа вне бандла; а если у пакета вовсе нет маленькой точки входа, честный ответ — зависимость поменьше или несколько строк, написанных вручную. Граф обнаруживается, а не объявляется, поэтому случайный импорт в любом месте меняет вывод: вот почему осмотр бандла после добавления зависимости — часть работы, а не необязательный аудит.

Пример 2 — Отладочная сборка, отправленная в продакшн

Одна и та же конфигурация обслуживает и локальную работу, и развёрнутый сайт, а на выходе — единственный нехешированный файл с читаемыми именами функций. Перечислите, чего стоит каждая отсутствующая настройка, и разделите две сборки.

export default {
  entry: "./src/index.js",
  output: { filename: "bundle.js" },
};

Решение

export default {
  mode: "production",
  entry: "./src/index.js",
  output: { filename: "[name].[contenthash].js", clean: true },
};

mode переключает весь набор значений по умолчанию. Без него сборка остаётся в отладочной форме: не минифицированная, без tree shaking, с удобным для отладки кодом, который стоит байтов и времени разбора каждому посетителю. Вторая половина дела — хеш содержимого в имени файла: он меняется только тогда, когда меняется содержимое файла, и именно это позволяет браузеру кэшировать бандл надолго, а не загружать его заново при каждом развёртывании. clean удаляет из выходного каталога устаревшие артефакты, чтобы старый хешированный файл нельзя было отдать по ошибке. Разработка и продакшн хотят противоположного: быстрых пересборок и читаемого исходного кода против маленького, хешированного, прошедшего tree shaking вывода. Большая часть сложности конфигурации идёт как раз из попытки обслужить обе задачи одним объектом настроек.