React с нуля. Минификация выходного JS.

В прошлый раз я окончательно разобрался (в необходимой мере) с webpack и gulp, и был неприятно удивлен размером JS файла, который генерируется на выходе — порядка 730кб. И это при том, что в бандл входит только react и react-dom.

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


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

Я в этом деле новичок, и разобраться было нелегко, хотя решение по факту простое.

Ключевой момент: для задачи минификации нужно использовать webpack плагины. Цитата с хабра:

Плагины — это дополнительные узловые модули, которые работают с результирующим бандлом.

То есть плагины работают уже после загрузчиков, манипулируя их результатами.

В нашем случае мы будет использовать встроенный в webpack плагин UglifyJsPlugin. Для этого не нужно устанавливать ничего дополнительно, достаточно его просто включить.

Для работы плагинов необходимо просто отредактировать конфиг вебпака webpack.config.js:

var path = require('path');
var webpack = require("webpack");
module.exports = {
entry: "./src/js/app.js",
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
],
output: {
path: path.resolve(__dirname, './build/js/'),
filename: 'bundle.js'
}
};

Обратите внимание на параметр plugins. Через него передается массив плагинов, которые будут использованы при сборке. Плагин UglifyJsPlugin может принимать входные параметры, об этом подробнее можно почитать в официальной документации.

Сохраняем файл. Запускаем gulp.
Изменяем наш app.js, например просто добавим пустой коммент. Смотрим консоль:

Вуа-ля, 218кб на выходе. Уже лучше :) И это вообще не углубляясь в настройки минификации, я думаю, что при тонкой настройке получится сжать файл еще сильнее. Но оставим это на потом :)