Webpack Tricks - Секреты эффективной сборки, о которых вы не знали

Вы когда-нибудь задумывались, почему ваш Webpack-бандл такой большой? Или почему сборка в development-режиме работает медленнее, чем хотелось бы? Сегодня я расскажу о репозитории, который собрал лучшие трюки для работы с Webpack.

Что это за проект?

Webpack Tricks — это коллекция практических советов от разработчика Рикардо Ста-Круз (Ricardo Stu Cruz), накопленных за годы работы с Webpack. Это не плагин и не библиотека, а скорее «поваренная книга» с проверенными рецептами.

Кому это будет полезно:

Разработчикам, которые хотят ускорить сборку проекта
Тем, кто борется с большим размером бандла
Всем, кто использует Webpack и хочет узнать о его скрытых возможностях

Топ-5 полезных трюков

1. Визуализация прогресса сборки

Часто сборка кажется «подвисшей», особенно в больших проектах. Добавьте два простых флага:

webpack --progress --colors

Теперь вы увидите цветной индикатор выполнения, который показывает, на каком этапе находится процесс сборки.

2. Оптимизация React-бандла

React в production-режиме может быть на 30 КБ легче, если отключить dev-инструменты:

plugins: [
  new webpack.EnvironmentPlugin({
    NODE_ENV: 'development'
  })
]

В Webpack 2+ достаточно добавить флаг -p при сборке для production.

3. Анализ размера бандла

Хотите узнать, какие библиотеки «раздувают» ваш бандл? Установите:

yarn global add webpack-bundle-size-analyzer

И запустите анализ:

./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer

Вы увидите что-то вроде:

jquery: 260.93 KB (37.1%)
moment: 137.34 KB (19.5%)
...

4. Разделение кода приложения и зависимостей

Используйте CommonsChunkPlugin, чтобы вынести vendor-код в отдельный файл:

entry: {
  app: './app.js',
  vendor: ['jquery', 'underscore']
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin('vendor')
]

Это улучшит кэширование — пользователям не придется загружать библиотеки заново при обновлении кода приложения.

5. Оптимизация Lodash

Если используете Lodash, можно значительно уменьшить его размер, подключая только необходимые функции:

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

plugins: [
  new LodashModuleReplacementPlugin({
    path: true,
    flattening: true
  })
]

Когда стоит использовать эти трюки?

Когда ваш бандл превышает 1 МБ
Если сборка в development-режиме занимает больше 10 секунд
Когда нужно улучшить производительность production-сборки
Если вы используете React, Lodash или другие популярные библиотеки

Webpack Tricks — это must-read для любого фронтенд-разработчика. Даже если вы считаете себя экспертом в Webpack, здесь наверняка найдете что-то новое. Лучше всего — начать с анализа размера бандла и постепенно применять подходящие оптимизации.

Советую добавить этот репозиторий в закладки и обращаться к нему при настройке новых проектов. Многие из этих советов экономят не только место, но и нервы при отладке.