Он действительно огромный — просто посмотрите на него:
Эта штука весит 103кб (в сжатом виде). Больше чем код приложения — интернет-магазин -(58kb) и сравнима со всем остальным кодом в vendor бандле (156kb) — включающем react, react-dom, react-router, moment.js, lodash и кучу других библиотек. Что еще хуже — firebase нужен не на всех страницах, и очень часто не нужен к моменту загрузку сайта.
Рубрика «webpack» - 6
firebase.js ПРОСТО ОГРОМНЫЙ (и что мы можем с этим сделать)
2017-12-08 в 14:05, admin, рубрики: ES6, javascript, ReactJS, webpack, Клиентская оптимизация, оптимизация сайта, Разработка веб-сайтовОптимизация фронтенда. Часть 2. Чиним tree-shaking в проекте на webpack
2017-11-23 в 10:05, admin, рубрики: babel, flow, Google Closure Compiler, javascript, tree-shaking, TypeScript, webpack, webpack 2, Блог компании Wrike, Клиентская оптимизация, Разработка веб-сайтов
Итак, если специально не чинить, tree-shaking в webpack не работает. Кто не верит, читайте мою предыдущую статью. Если починить очень хочется, то добро пожаловать под кат. Тут есть несколько вариантов, которые я смог подсмотреть, найти придумать. Читать полностью »
Внутреннее устройство и оптимизация бандла webpack
2017-11-21 в 14:21, admin, рубрики: holyjs, holyjs2017moscow, javascript, webpack, Алексей Иванов, Блог компании JUG.ru Group, Злые марсиане, Разработка веб-сайтовWebpack фактически стал стандартом для сборки крупных приложений на JS. Его используют практически все. Для разработчика webpack выглядит как магический черный ящик: если забросить в него файлы и небольшой конфиг, на выходе автоматически появится бандл.
Чтобы разобраться в секретах этой магии, мы обратились к эксперту, человеку, который неоднократно залезал внутрь webpack, — Алексею Иванову. Он готов объяснить, как выглядит бандл изнутри, как на него влияют разные настройки, к чему и почему могут привести некоторые из них, а также рассказать, как все это отладить и оптимизировать.
В основе материала — доклад Алексея Иванова на конференции HolyJS 2017, проходившей в Санкт-Петербурге 2-3 июня.
Читать полностью »
Оптимизация фронтенда. Часть 1. Почему я не люблю слово treeshaking или где вас обманывает webpack
2017-11-21 в 8:49, admin, рубрики: javascript, treeshaking, webpack, Блог компании Wrike, Клиентская оптимизация, Разработка веб-сайтов
Мы относимся к технологиям, которые используем, как к покупкам на Яндекс маркете. Смотрим на спецификацию, читаем отзывы и, если проект получил много звездочек на гитхабе, проходит по спецификации, и к тому же внедрение стоит недорого, мы его покупаем устанавливаем. Такой подход иногда очень сильно бьет по голове ручкой от граблей, и тогда все-таки приходится разбираться, что происходит.Читать полностью »
Окружение для разработки веб-приложений на TypeScript и React: от ‘hello world’ до современного SPA. Часть 2
2017-10-28 в 8:05, admin, рубрики: javascript, React, ReactJS, redux, TypeScript, webpack, Разработка веб-сайтовЦель данной статьи — вместе с читателем написать окружение для разработки современных веб-приложений, последовательно добавляя и настраивая необходимые инструменты и библиотеки. По аналогии с многочисленными starter-kit / boilerplate репозиториями, но наш, собственный.
Статья полностью открыта для доработки и исправления, и, возможно, итоговый материал превратится в актуальный и удобный справочник, интересный и для профессионалов, и для желающих опробовать новые для них технологии.
Окружение для разработки веб-приложений на TypeScript и React: от ‘hello world’ до современного SPA. Часть 1
2017-10-21 в 18:35, admin, рубрики: javascript, React, ReactJS, redux, TypeScript, webpack, Разработка веб-сайтовЦель данной статьи — вместе с читателем написать окружение для разработки современных веб-приложений, последовательно добавляя и настраивая необходимые инструменты и библиотеки. По аналогии с многочисленными starter-kit / boilerplate репозиториями, но наш, собственный.
Так же, автор пишет эту статью для структурирования собственных мыслей, знаний и практического опыта, и получает хорошую мотивацию на изучение новых аспектов разработки.
Автор полностью открыт для доработки и исправления текущей статьи, и надеется на превращение итогового материала в актуальный и удобный справочник, интересный и для профессионалов, и для желающих опробовать новые для них технологии.
Server side rendering на Vue.js
2017-10-13 в 6:22, admin, рубрики: html, javascript, node.js, server side rendering, ssr, vue.js, vuex, webpack, системы сборкиСравнительно недавно Vue.js обзавёлся полноценной поддержкой серверного рендеринга. В интернете довольно мало информации о том, как его правильно готовить, так что я решил подробно описать процесс создания необходимой среды для разработки приложения с SSR на Vue.js.
Всё, о чём пойдёт речь, реализовано в репозитории на github. Я буду часто ссылаться на его исходники и, собственно, попытаюсь объяснить, что происходит и зачем это нужно :)
В статье будут описаны достаточно общие для SSR подходы (если вам просто нужно что-то готовое для использования, то вы можете посмотреть в сторону Nuxt.js), так что вполне вероятно, что сказанное ниже можно будет частично или полностью применить и к другим фреймворкам/библиотекам типа Angular и React.
Webpack и моканье зависимостей
2017-10-08 в 7:39, admin, рубрики: javascript, mocking, rewiremock, webpackВ мире JavaScript существуют две фракции. Первая из них — технари, которые все проблемы стараются решать «технично». Вообще технари ребята суровые, я бы даже сказал строгие, и потому любят такую же суровую и строгую типизацию, и везде суют TypeScript, Dependency Injection и другой IoC.
Вторая же — маги. Кто-то, считает их шарлатанами, и уж никто точно не понимает как работает их код. Но он работает. На строгую типизацию у них табу, а про(от) DI у них есть простая отговорка:
«Зачем мне уродовать свой код, смешивая ужа с ежом, если это нужно исключительно для тестов?».
И ведь на самом деле — добавлять в проект DI исключительно чтобы мокать зависимости в тестах — идея не самая умная. Особенно если DI и на самом деле редкий зверь за пределами экосистемы Angular.
Есть только одно но — если технари от своей профдеформации не страдают, то маги… ну как сказать…
В общем пару месяцев назад один добрый человек создал мне в proxyquire-webpack-alias issue. Суть была проста — «не работает». Мне потребовался день чтобы изменить ЧТО не работает, на ГДЕ.
Фабрика виджетов для MPA
2017-10-06 в 13:59, admin, рубрики: javascript, webpack, оптимизация загрузки скриптов, организация кода
Фабрика виджетов — способ организации клиентского кода, который отлично вписывается в архитектуру multi-page application (MPA).
В статье будет рассмотрено архитектурное решение, которое позволит оптимизировать загрузку скриптов, разделить код на виджеты и упростит передачу данных на клиент со страницы (при серверном рендеринге).
Виджетами будут называться компоненты (или контейнеры компонентов), точкой инициализации которых будет DOM. И в которые можно будет передать данные из шаблона.
А сейчас обо всем последовательно.
Читать полностью »
Очевидная неочевидность в сборке с помощью Webpack
2017-10-02 в 21:36, admin, рубрики: bundle, javascript, node.js, nodejs, optimization, refactoring, webpack, рефакторинг
Работая в крупной компании довелось перехватить внутренний проект, который нужно было сдать вчера. Народ кочевал и топтался по нему, развивая культуру Святого Копипаста. А package.json рос не по дням, а по часам. Спустя только год удалось приступить к рефакторингу. В этой статье речь пойдет об одной конкретной оптимизации, о которой на просторах рунета я ничего не слышал.