4 совета для оптимизации webpack-приложения

[@noodles]

У разработчиков gsap получилась отличная библиотека для создания анимаций. Но из-за того, что она берет свое начало еще из 2008 года, в ней остались некоторые особенности.

Открыл для себя anime.js
15кб, а возможности почти все те же что и у GreenSock.

[@AndreasCag]

У GSAP слишком крутые таймлайны, которые можно вкладывать в другие таймлайны, на которые можно поставить label и начать от него еще один таймлайн)

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

[@apapacy]

Я собираю скрипты последней версией webpack babel и в сгененрирванных скриптах не нахожу _asyncToGenerator а все на промисах.
Похоже эта часть уже не актуальна.

Ручная настройка минификации js тоже спорный вопрос т.к. в webpack 4 она включена по умолчанию в зависимости от окружения (дейтсвует на проде).

Наиболее эффективный способ «минимизации» когда речь идет не об нескольких процентах, а об уменьшении скрипта в несколько раз — этоcode splitting

Помимо уменьшения это позволяет также уменьшить время на разбор скрипта который в большем приложении подгружается по мере необходимости

Вы обратили внимание что иллюстрация в начале статьи не имеет отношения к JS/babel/webpack?

[@AndreasCag]

Я собираю скрипты последней версией webpack babel и в сгененрирванных скриптах не нахожу _asyncToGenerator а все на промисах.
Похоже эта часть уже не актуальна.

Хмм, тестанул на webpack 4.20.2 + babel/preset-env 7.1.0, в билде присутствует regenerator-runtime.
Можно конфиг бабеля и пример трансформации?

Ручная настройка минификации js тоже спорный вопрос т.к. в webpack 4 она включена по умолчанию в зависимости от окружения (дейтсвует на проде).

Я и хочу, чтобы в проде вместо дефолтных настроек минификации были кастомные, написанные лично программистом :)
По умолчанию, в проде вебпак вставит внутрь optimization.minimizer вот такое: new UglifyJsPlugin(), а если разрешить минификатору делать unsafe трансформации и сделать два круга минификации, то после 10 минут настройки бандл ужмется на 1-2%.

[@apapacy]

Ссылка на конфиг есть в моем комментарии. Это все в проекте можно протестировать с учетом всего окружения.

Сорри ссвлка почему-то ушла. Вот она github.com/apapacy/realworld-react-universal-hot/blob/master/webpack/config.client.js

[@AndreasCag]

Так у вас в коде и нету асинхронных функций, вот таких:

const test = async () => {
  await fetch('qwe-qwe');
}

А есть только обычные функции, работающие с промисами.

[@apapacy]

async/await как раз исползуется на фронте во всех практически компонентах см. github.com/apapacy/realworld-react-universal-hot/blob/88daca208b47bee73e0aa891c12a0a2f4bd2161c/src/react/pages/article.js#L36

[@AndreasCag]

Ага, понял. Собрал проект, у вас везде есть regeneratorRuntime. Можете поискать по `regeneratorRuntime` или `.mark`

[@apapacy]

Да regeneratorRuntime присутсвует.
На всякий случай добавил предложенный Вами плагин в код проекта.

[@dumistoklus]

loose трансформации нельзя навесить на все плагины при использовании babel 7, которые недавно релизнулся. Эта опция была в нем удалена. Нужно перечислять все плагины и в каждом писать loose: true. Что, конечно, мега неудобно

[@Rulexec]

Опции babel'а в js-файле. Какие проблемы перед тем как экспортировать объект с опциями пройтись по массиву плагинов и в каждый объект добавить поле?

[@dumistoklus]

Все просто: мы не управляем тем какие плагины используются, поэтому ничего о них не знаем. Нет никакого массива плагинов. Вернее есть, но в нем только один плагин — babel-preset-env: он определяет по списку браузеров browserlist уровень транспиляции, и подгружает те плагины, которые необходимы. При этом сам babel-preset-env также не имеет опции loose

[@AndreasCag]

Preset-env последней версии имеет loose опцию и успешно ей пользуется.

[@dumistoklus]

Да, вы правы. Я ошибся с loose опцией

[@KhodeN]

А чем null-loader лучше встроенного плагина IgnorePlugin?

[@AndreasCag]

Он не лучше и не хуже, они используются для разных вещей.

Если в случае с GSAP вы станете использовать IgnorePlugin, то получите ошибку, так как GSAP попытается подтянуть модуль, которого нету. IgnorePlugin его вырезал.

IgnorePlugin нужен для того, чтобы вырезать из собранного бандла лишние модули, которые вошли в него из-за dynamic-require (Хороший пример с локализацией moment'а у вас по ссылке).

А null-loader нужен, чтобы преобразовать уже зареквайреный модуль в пустое место.

[@KhodeN]

Спасибо, в том числе за статью!