Как минифицировать код и js-библиотеки с помощью webpack?

Question

[markmariner]

Мой проект собирается с помощью Webpack и использует около 20 npm-библиотек, в том числе больших, как Angular.js. Необходимо минифицировать код для выпуска продукта. Мне понятно, что для этого стоит использовать плагин webpack.optimize.UglifyJsPlugin, однако появляется несколько вопросов:

• Нужно ли минифицировать этим плагином и подключённые библиотеки или сразу подключать их минифицированные версии?
  
• Если подключить минифицированные версии, то как сообщить плагину, что нет необходимости трогать библиотеки вообще, а достаточно только минифицировать мой код?
  

Буду рад услышать аргументированное мнение по этим вопросам.

Answer 1

[xutesayor]

Конечно же нужно все минифицировать, библиотеки ведь тоже бывают не минифицированные. Причем минифицировать нужно только перед деплоем на прод. У меня это так сделано:

if (process.env.NODE_ENV === 'production') {
    plugins.push(new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}}));
}

Comments

[markmariner]

А зачем тогда с многими библиотеками в комплекте минифицированные версии? На тот случай, если никакие минификаторы больше не используются?

[Максим]

markmariner: мне кажется тут надо как-то поразумнее подойти к вопросу. Вынести популярные большие библиотеки в html файл напрямую и подключить через CDN. Скрипты библиотек нужно вытащить при сборке в vendor.js и этот файл не подключать (так как они у вас уже через CDN загружены). А минифицировать только свой код для продакшен сборки. Нет примера сейчас под рукой, поэтому прошу это рассматривать только как "мысли / теорию".

[markmariner]

Максим: принцип понял, спасибо!

[iBird Rose]

markmariner:

А зачем тогда с многими библиотеками в комплекте минифицированные версии?

вопрос нужно наоборот задавать. зачем там нормальный вид. когда речь идет о библиотеке - в 90% случаев библиотека берется ее и вставляется как есть. значит она должна иметь минимальный размер. а вот нормальная версия библиотеки делается для того чтобы разработчик смог усовершенствовать ее, либо допилить под себя.

[markmariner]

iBird Rose: как, в таком случае, мне сообщить плагину UglifyJsPlugin, что эти библиотеки трогать при сборке не нужно?

[abberati]

iBird Rose:
> делается для того чтобы разработчик смог усовершенствовать ее, либо допилить под себя.
НЕТ. никогда так не делайте.
нормальная версия остаётся для того, чтобы программист (или IntelliSense, например) мог зайти в исходный код и разобраться.
не "совершенствуйте" библиотеки, если у вас нет чёткого понимания, что вы делаете (ну и пары-тройки лет нормальной разработки за спиной)

[abberati]

markmariner: а зачем?
если вы выставите минификацию только в prod-режиме, то что вы выиграете, если webpack не потратит лишние 2-3 секунды на анализ минифицированных файлов?