Comments 17
У разработчиков gsap получилась отличная библиотека для создания анимаций. Но из-за того, что она берет свое начало еще из 2008 года, в ней остались некоторые особенности.
Открыл для себя anime.js
15кб, а возможности почти все те же что и у GreenSock.
Я собираю скрипты последней версией webpack babel и в сгененрирванных скриптах не нахожу _asyncToGenerator а все на промисах.
Похоже эта часть уже не актуальна.
Ручная настройка минификации js тоже спорный вопрос т.к. в webpack 4 она включена по умолчанию в зависимости от окружения (дейтсвует на проде).
Наиболее эффективный способ «минимизации» когда речь идет не об нескольких процентах, а об уменьшении скрипта в несколько раз — этоcode splitting
Помимо уменьшения это позволяет также уменьшить время на разбор скрипта который в большем приложении подгружается по мере необходимости
Вы обратили внимание что иллюстрация в начале статьи не имеет отношения к JS/babel/webpack?
Похоже эта часть уже не актуальна.
Ручная настройка минификации js тоже спорный вопрос т.к. в webpack 4 она включена по умолчанию в зависимости от окружения (дейтсвует на проде).
Наиболее эффективный способ «минимизации» когда речь идет не об нескольких процентах, а об уменьшении скрипта в несколько раз — этоcode splitting
Помимо уменьшения это позволяет также уменьшить время на разбор скрипта который в большем приложении подгружается по мере необходимости
Вы обратили внимание что иллюстрация в начале статьи не имеет отношения к JS/babel/webpack?
Я собираю скрипты последней версией 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%.
Ссылка на конфиг есть в моем комментарии. Это все в проекте можно протестировать с учетом всего окружения.
Сорри ссвлка почему-то ушла. Вот она github.com/apapacy/realworld-react-universal-hot/blob/master/webpack/config.client.js
Сорри ссвлка почему-то ушла. Вот она github.com/apapacy/realworld-react-universal-hot/blob/master/webpack/config.client.js
Так у вас в коде и нету асинхронных функций, вот таких:
А есть только обычные функции, работающие с промисами.
const test = async () => {
await fetch('qwe-qwe');
}
А есть только обычные функции, работающие с промисами.
async/await как раз исползуется на фронте во всех практически компонентах см. github.com/apapacy/realworld-react-universal-hot/blob/88daca208b47bee73e0aa891c12a0a2f4bd2161c/src/react/pages/article.js#L36
loose трансформации нельзя навесить на все плагины при использовании babel 7, которые недавно релизнулся. Эта опция была в нем удалена. Нужно перечислять все плагины и в каждом писать loose: true. Что, конечно, мега неудобно
Опции babel'а в js-файле. Какие проблемы перед тем как экспортировать объект с опциями пройтись по массиву плагинов и в каждый объект добавить поле?
Все просто: мы не управляем тем какие плагины используются, поэтому ничего о них не знаем. Нет никакого массива плагинов. Вернее есть, но в нем только один плагин — babel-preset-env: он определяет по списку браузеров browserlist уровень транспиляции, и подгружает те плагины, которые необходимы. При этом сам babel-preset-env также не имеет опции loose
Preset-env последней версии имеет loose опцию и успешно ей пользуется.
А чем null-loader лучше встроенного плагина IgnorePlugin?
Он не лучше и не хуже, они используются для разных вещей.
Если в случае с GSAP вы станете использовать IgnorePlugin, то получите ошибку, так как GSAP попытается подтянуть модуль, которого нету. IgnorePlugin его вырезал.
IgnorePlugin нужен для того, чтобы вырезать из собранного бандла лишние модули, которые вошли в него из-за dynamic-require (Хороший пример с локализацией moment'а у вас по ссылке).
А null-loader нужен, чтобы преобразовать уже зареквайреный модуль в пустое место.
Если в случае с GSAP вы станете использовать IgnorePlugin, то получите ошибку, так как GSAP попытается подтянуть модуль, которого нету. IgnorePlugin его вырезал.
IgnorePlugin нужен для того, чтобы вырезать из собранного бандла лишние модули, которые вошли в него из-за dynamic-require (Хороший пример с локализацией moment'а у вас по ссылке).
А null-loader нужен, чтобы преобразовать уже зареквайреный модуль в пустое место.
Sign up to leave a comment.
4 совета для оптимизации webpack-приложения