Оптимизация фронтенда. Часть 1. Почему я не люблю слово treeshaking или где вас обманывает webpack

[ga2mer]

Больше всего, мне не нравится выхлоп в сравнении с тем же rollup, в этом issue это описано

[miraage]

Human-readable код делается с помощью sourcemaps.

[zolotyh]

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

[miraage]

Абсолютно согласен с размером бандлов. Однако стоит учитывать, что у webpack и rollup немного разные ниши.

[some_x]

Какие у них ниши? Как раз сейчас активно разбираюсь во всём этом зоопарке (раньше кодовая база не имела модулей), поэтому очень интересно.

[miraage]

Rollup для микро-приложений (несколько простых скриптов, никаких стилей/svg..) и библиотек. Webpack уже для полноценных SPA.

[miraage]

Хочу вставить пару копеечек.

Предположим, мы имеем следующий код (почти как у автора в статье):

// foo.js
import { getBar } from './bar';
getBar();
// bar.js
export function getBar() {}
export function setBar() {}

И почему же webpack нам отдает даже те экспорты, которые не используются? А делает он это потому, что webpack молодец, следует стандартам EcmaScript. Он обязан загрузить полностью весь модуль, выполнить его, и только потом выполнять свой код. Именно поэтому в результирующем коде и появляется весь модуль.

Так же, все импорты «хоистятся» (не знаю, как это правильно на русском написать). Поэтому их надо писать в начале файла, и ни в коем случае не в каких-нибудь if. Они должны быть статическими. Сейчас комитетом ТС39 ведется работа над динамическим импортом, который уже в Stage 3.

В релизах webpack 2.x они пытались прикрутить tree shaking, но не очень удачно. В текущих версиях (3.8+), ситуация уже лучше. Rollup предназначен для библиотек и микро приложений, был написан с нуля, и выполняет свою четкую задачу. webpack уже был монстром на тот момент, поэтому интерграция tree shaking в него не такая уж и тривиальная задача.

Правильная конфигурация webpack, в частности, плагинов (код-сплиттинг, минификация, итд) позволяет писать весьма компактные бандлы. Поэтому не надо тут на него клеветать.

import на MDN, там же есть ссылки сопутствующие спекификации.

[zolotyh]

Я не против webpack, как инструмента. Гораздо больше меня смущают поверхностные мнения и суждения. Как сейчас все выглядит: webpack поддерживает tree-shaking, и rollup поддерживает tree-shaking – значит они жмут код примерно одинаково. На самом деле это далеко не так. И те, кто думает, что у них прямо сейчас работает tree-shaking, скорее всего ошибаются.

[miraage]

Да, всё верно. Я считаю, что tree-shaking еще совсем «зеленый», поэтому чудес от него ожидать не стоит. Надо писать нормальный код и правильно конфигурировать сборщик.

[panovps]

Если проблема в tree-shaking после babel, то нельзя ли просто babel запускать после tree-shaking?

[zolotyh]

Хороший вопрос, если коротко, то нет
Если длинно, то UglifyJS падает, когда видит ES2015+ код, но есть версия UglifyJS для ES. Очень сомневаюсь в ее качестве по сравнению с оригиналом. Но я не об этом. Поскольку Babel генерирует неоптимальный код, придется прогонять UglifyJS еще раз или оставлять все так, как нагенерировал Babel. Оба варианта мне не очень нравятся.

[zolotyh]

На самом деле обо всем об этом напишу немного попозже, решений несколько.

[justboris]

P.S. Напишите в комментариях, если тоже попадались на удочку маркетологов и выбирали модную технологию вместо решения проблем.

Про удочку маркетологов смешно получилось. Сразу представил офис Webpack, Inc. и совещание на тему "Чем будем ловить пользователей в следующем году?" Поддержка WASM? Нанооптимизации через машинное обучение?

[zolotyh]

Согласен, маркетинг должен быть в кавычках )) Но при всей моей любви к Rollup, статья про него и про tree-shaking рекламная. Рекламирует сборщик.

[gonzazoid]

выкидываем углифай, ставим closure compiler, радуемся жизни.

[some_x]

А чем он поможет. Чтоб он эффективно работал в advanced mode нужно писать код по всем правилам (расставлять везде комментарии с типами) и если где-то ошибёшься то он тебе сломает код. А в более простом режиме он работает примерно как uglify.

Пишу по опыту где-то 4-х лет назад. Что-то изменилось?